javascript - 无需 Jquery 获取和设置当前输入值

Question

不用jQuery也能获取当前输入值吗？ 我的意思是，我不想使用 document.getElementById/class。我想通过输入标签获取元素。

我用 jQuery 实现了这个:

    $(document).on('keyup', 'input', function(e) {
        console.log($(this).val());
    })

并且适用于每个输入。

<div>
    <input type="text" value="">
    <input type="text" value="">
</div>

我不知道如何将 jQuery 代码转换为纯 JavaScript 代码。我试试这个:

    document.querySelector('input').addEventListener('input', function (evt) {
        console.log(this.value);
    });

但是，仅适用于第一个输入。有什么想法吗？

Answer 1

您需要使用函数querySelectorAll来获取整个元素集。然后，您需要循环这些元素并绑定(bind)必要的事件。

函数querySelector仅返回第一个找到的元素。

document.querySelectorAll('input').forEach(function(input) {
  input.addEventListener('input', function(evt) {
    console.log(this.value);
  });
})

<div>
  <input type="text" value="">
  <input type="text" value="">
</div>