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解决方案是绑定＆＃34;更改＆＃34;活动到你的＆＃34; manyInputs＆＃34; 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小提琴数据ID解决方案：https://jsfiddle.net/kas1h6xe/

输入oninput事件的事件委托

2 个答案: