輸入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/