Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2018, 11:17
Новичок на форуме
Отправить личное сообщение для sergylt Посмотреть профиль Найти все сообщения от sergylt
 
Регистрация: 07.02.2016
Сообщений: 5

Копирование при вводе из трех input в один
Подскажите как реализовать автоматическое копирование из трех полей при вводе текста или вставке в одно?

вводим 1<input type="text" name="T1" size="20" value="aaa"><br>
вводим 2<input type="text" name="T1" size="20" value="bbb"><br>
вводим 3<input type="text" name="T1" size="20" value="ccc"><br>
<br><br>
Получаем<input type="text" name="T1" size="20" value="aaa - bbb - ccc">
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2018, 11:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

sergylt,
в чём проблема в цикле собрать данные из трёх input? addEventListener('input', ...
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2018, 12:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Вывод значений input
sergylt,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = [].slice.call(document.querySelectorAll('[name="T1"]'), 0, -1),
        out = [].slice.call(document.querySelectorAll('[name="T1"]'), -1)[0];
    inp.forEach(function(item) {
        item.addEventListener("input", function() {
            var str = inp.reduce(function(arr, el) {
                el = el.value.trim();
                el && arr.push(el);
                return arr
            }, []);
            str = str.join(" - ");
            out.value = str
        })
    })
});
  </script>
</head>

<body>
вводим 1<input type="text" name="T1" size="20" value="aaa"><br>
вводим 2<input type="text" name="T1" size="20" value="bbb"><br>
вводим 3<input type="text" name="T1" size="20" value="ccc"><br>
<br><br>
Получаем<input type="text" name="T1" size="20" value="aaa - bbb - ccc">


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2018, 13:34
Новичок на форуме
Отправить личное сообщение для sergylt Посмотреть профиль Найти все сообщения от sergylt
 
Регистрация: 07.02.2016
Сообщений: 5

Благодарю за отличный пример!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При отметке checkbox заполнение поля input text значением из друого поля на странице mxup Элементы интерфейса 21 27.12.2017 13:43
Почему при вводе последнего символа происходит выделение в инпуте? Валерий1996 Общие вопросы Javascript 1 02.09.2015 13:19
События при изменении содержимого input sean88 jQuery 2 17.09.2014 16:42
Такое возможно? При выборе radio надо чтобы менялось значение в input Stas111111 Общие вопросы Javascript 11 23.05.2014 00:41
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10