Делегирование событий с входом на событие ввода

Можно ли как-то настроить делегирование события oninput для изменения текста div changeText?

<div id="manyInputs">
    <div>
        <input type="text">
        <div class="changeText">

        </div>
    </div>
    <div>
        <input type="text">
        <div class="changeText">

        </div>
    </div>
    <div>
        <input type="text">
        <div class="changeText">

        </div>
    </div>
</div>

javascript input event-delegation
person UkoM    schedule 28.03.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Самый простой способ сделать это — использовать функцию jquery .keyup(). Что позволяет вам привязать обработчик событий к событию JavaScript "keyup" или вызвать это событие для элемента.

HTML:

<div id="manyInputs">
  <div>
    <input id="input1" type="text" data-div-id="divForInput1">
    <div id="divForInput1" class="changeText"></div>
  </div>
  <div>
    <input id="input2" type="text" data-div-id="divForInput2">
    <div id="divForInput2" class="changeText"></div>
  </div>
  <div>
    <input id="input3" type="text" data-div-id="divForInput3">
    <div id="divForInput3" class="changeText"></div>
  </div>
</div>

Javascript:

<script>
  $(document).ready(function() {
    $('input[type="text"]').keyup(function() {
       $('#' + $(this).attr('data-div-id')).text($(this).val());
    });
  });
</script>

Вы можете попробовать этот пример, который я сделал в jsfiddle (убедитесь, что вы нажали кнопку «Выполнить» вверху):

https://jsfiddle.net/gLxxj21h/1/

person Calvin Alvin    schedule 28.03.2017
comment
Таким образом, мне нужно настроить много обработчиков событий, но можно ли как-то использовать только 1 обработчик событий для многих входов? И, если возможно, в ванильном JS - person UkoM; 28.03.2017
comment
Тогда пара вещей. 1.) Вам нужно будет добавить какой-то идентификатор в div, в который вы хотите писать. 2.) Вам необходимо выполнить привязку либо к классу, либо к селектору css «input [type = text]» для keyup. Таким образом, он привязывается ко всем входам. Посмотрите на этот jsfiddle в качестве примера: jsfiddle.net/gLxxj21h - person Calvin Alvin; 28.03.2017
comment
Я не рекомендую делать это в простом vanilla js - person Calvin Alvin; 28.03.2017

arrow_upward
0
arrow_downward

Ванильное JS-решение, которое будет работать, состоит в том, чтобы привязать событие «change» к вашему div «manyInputs», захватить целевой элемент из обработчика событий и найти его следующего брата. Если вы не знаете структуру своего кода, вы также можете добавить идентификатор данных к входным данным, а затем использовать этот идентификатор, чтобы найти свой текстовый div для добавления значения.

HTML

<div id="manyInputs">
    <div>
        <input type="text">
        <span class="changeText"></span>
    </div>
    <div>
        <input type="text">
        <span class="changeText" ></span>
    </div>
    <div>
        <input type="text">
        <span class="changeText"></span>
    </div>
 </div>

Javascript

var inputs = document.getElementById('manyInputs');
inputs.addEventListener('change', function(e){
    var value = e.target.value;
    e.target.nextElementSibling.innerHTML = value;
});

JS Fiddle: https://jsfiddle.net/s7wtevbu/

JS Fiddle с решением для идентификатора данных: https://jsfiddle.net/kas1h6xe/

person moeamaya    schedule 13.05.2017