输入oninput事件的事件委托

Question

是否有可能设置oninput事件委托来更改changeText div的文本？

<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>

Answer 1

最简单的方法是使用jquery的.keyup()函数。 这允许您将事件处理程序绑定到“keyup”JavaScript事件，或在元素上触发该事件。

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/

Answer 2

一个可行的vanilla JS解决方案是将“change”事件绑定到“manyInputs”div并从事件处理程序中获取目标元素并查找它的下一个兄弟。 如果您不知道代码的结构，那么您还可以向输入添加数据ID，然后使用该ID来查找要添加值的文本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小提琴： https ： //jsfiddle.net/s7wtevbu/

JS Fiddle with data-id解决方案： https ： //jsfiddle.net/kas1h6xe/