按下回车键清除输入字段答案

【问题标题】：clearing input fields upon pressing enter按下回车键清除输入字段
【发布时间】：2015-07-28 10:35:09
【问题描述】：

用户在输入字段中按下回车键后，我清除document.getElementById('text').value = ""; 的值

当我使用空格键遍历数组时，这当然会显示多个具有相同 ID 的输入字段id='text'

在第一个输入字段中输入并按回车键后，输入字段清除。

但是，对于后续的 inout 字段，情况并非如此。我知道document.getElementById 只能找到 first id。

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

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

    }
},

【问题讨论】：

使用 class 代替 id 因为 id 的值在 HTML 文档中必须是唯一的。
那么你为什么不使用 jquery 库呢？
我通过 'this' 的上下文获取 id，该上下文由输入元素上的 keyup 捕获。那么输入元素的哪些标准属性可以相同呢？或者我应该插入我自己的“数据”属性，例如。数据同义词
另外，我正在使用属性“名称”来标识我要编辑的对象中的哪个字段。这是一个好习惯还是我应该做一个数据属性。例如。 data-fieldname="details"

标签： javascript jquery meteor

【解决方案1】：

永远不要对多个元素使用 ID。 ID 是唯一的，它只能在 HTML 文档中出现一次。改用类或常规 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" />

【讨论】：

【解决方案2】：

解决方案：

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

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

    $(this).val("");

});

jsfiddle 上的工作示例，最初由 @abdullah

建议：

对多个元素使用相同的 id 不是一个好主意，id 必须是唯一的。
如果你包含它，请使用 Jquery 库 $("#id") 比 document.getElementById("id") 更简单和整洁

【讨论】：

谢谢老兄我更新了我的答案。你知道我不记得我对许多输入使用相同的 id 的时间（消息不是好习惯）哈哈。

【解决方案3】：

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

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

通过

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

【讨论】：