Question

我有多个输入字段。我想在键盘输入时通过选择器 getElementsByTagName 来获取输入字段的值和名称。在jQuery中，我们可以在jQuery中使用 this 进行相同的操作。但是我想要javascript。

此处的抠像是动态的。而且在javascript中键入键时，我需要动态地输入字段的值和名称。

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

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

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

Answer 1

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

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

注释：

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">

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

1 个答案: