javascript - 在 javascript 中使用 getElementsByTagName 获取输入字段的值和名称？

Question

我有多个输入字段。我想在 keyup 时通过选择器 getElementsByTagName 获取输入字段的值和名称。在 jQuery 中，我们可以在 jQuery 中使用 this 来做同样的事情。但我想要 javascript。

这里的 keyup 是动态的。我需要在 javascript 的 keyup 上动态输入字段的值和名称。

在下面的代码中我不想添加索引零，我需要它动态工作并给出结果。

   const eventClickToDisconnect = document.getElementsByTagName('input');

   eventClickToDisconnect[0].addEventListener('keyup',this.setInputValueWhileOnChange.bind(this));

Answer 1

首先，stop using .getElementsByTagName()因为这是一个有 20 多年历史的 API，它会返回一个实时节点列表，这会影响性能。相反，使用 .querySelectorAll() ，它返回一个静态节点列表并且更加灵活，因为您可以将任何有效的 CSS 选择器传递给它(而不仅仅是标签名称)。

然后，您可以简单地遍历列表中的节点并绑定(bind)您的事件处理程序，如下所示。

注意事项:

• keyup 显然会在每次击键时触发。你确定吗那就是你想要的？也许您想等到用户完成编辑字段，在这种情况下使用 change 代替，当字段失去焦点并且值已被修改时将触发。

• .forEach() 适用于任何现代浏览器中的数组和节点列表，但是它在IE中不起作用，如果你需要与IE兼容，您只需要将节点列表转换为正式数组，例如这个:

  Array.prototype.slice.call(document.querySelector("input"));

const eventClickToDisconnect = document.querySelectorAll('input');

// Loop over the nodes found with querySelectorAll
eventClickToDisconnect.forEach(function(element){
  element.addEventListener("keyup", setInputValueWhileOnChange);
});

function setInputValueWhileOnChange(){
  // Within this callback, you can use "this" to refer to the element that
  // the event was triggered on
  console.log(this.name, this.value);
}

Name: <input name="txtName"><br>
Age: <input name="txtAge"><br>
Fav Color: <input name="txtColor">