清除输入字段在按下Enter键时

Question

当用户在输入框中按下回车键后，我通过document.getElementById('text').value = "";清除值。

由于我使用空格条来迭代数组，因此这将显示具有相同id的多个输入字段，当然是id='text'

在输入第一个输入字段并按下回车键后，该输入字段将被清除。

但是，对于后续的输入字段，情况并非如此。我理解document.getElementById只会找到第一个 id。

我该如何使所有输入字段的输入值都被清除。

    'keydown #text': function(event, template) {
    if ((27 === event.which) || (13 === event.which)) {
        event.preventDefault();
        document.getElementById('text').value = "";

    }
},

- meteorBuzz

---

使用 class 而不是 id，因为在 HTML 文档中，id 的值必须是唯一的。 - Mahedi Sabuj

你为什么不使用 jQuery 库？ - dsharew

我通过捕获输入元素的键盘按键事件来获取“this”上下文的ID。那么哪些输入元素的标准属性可以是相同的？还是应该插入自己的“数据”属性，例如data-sameidentifier？ - meteorBuzz

另外，我使用属性“name”来标识要编辑的对象中的哪个字段。这是一个好的做法，还是应该创建一个数据属性，例如data-fieldname =“details”？ - meteorBuzz

Answer 1

永远不要为多个元素使用ID。ID是唯一的，它在HTML文档中只能出现一次。请改用class或常规HTML元素选择器：

'keydown input[type="text"]': function(event, template) {
    if ((27 === event.which) || (13 === event.which)) {
        event.preventDefault();
        //this should delete value from the input
        event.currentTarget.value = "";
    }
}

而在HTML中：

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

- Tomas Hromnik

Answer 2

解决方案：

---

你可以遍历所有匹配项并清除它们的值。

$("[id='text']").each(function(){

    $(this).val("");

});

这是由@abdullah首次注释的jsfiddle上的工作示例。

建议：

---

1. 使用相同的id来标识多个元素不是一个好主意，id必须是唯一的。

2. 如果您正在包含它，则使用Jquery库$("#id")比document.getElementById("id")更简单和整洁。

- dsharew

---

谢谢，伙计。我更新了我的答案。你知道我不记得我曾经在许多输入中使用相同的ID（这不是好习惯）哈哈。 - dsharew

Answer 3

我会将事件监听器放在父级元素上（例如表单）。而不是

document.getElementById('text').value = "";

由

var inputs = event.currentTarget.querySelector('input');
Array.prototype.forEach.call(inputs , function(el, i){
    el.value = '';
});

- Marc Duboc