Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Копирование при вводе из трех input в один (https://javascript.ru/forum/dom-window/72944-kopirovanie-pri-vvode-iz-trekh-input-v-odin.html)

sergylt 09.03.2018 11:17

Копирование при вводе из трех 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">

рони 09.03.2018 11:34

sergylt,
в чём проблема в цикле собрать данные из трёх input? addEventListener('input', ...

рони 09.03.2018 12:28

Вывод значений 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>

sergylt 09.03.2018 13:34

Благодарю за отличный пример!


Часовой пояс GMT +3, время: 10:51.