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来获取整个元素集。然后，您需要遍历这些元素并绑定必要的事件。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用document.getElementsByTagName并循环播放

＆＃13;

for (var i=0; i< document.getElementsByTagName("input").length; i++) {
  document.getElementsByTagName("input")[i].addEventListener('input', function(evt) {
    console.log(this.value);
  });
}

＆＃13;

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

＆＃13;

在没有Jquery的情况下获取并设置当前输入值

2 个答案: