2

这是有效的代码（但重复）。我试图用“getElementsByClassName”替换“getElementById”部分，向元素添加一个类——但这对我来说没有用。现在我为每个 ID 重复一次这个匿名函数：

document.getElementById("gasCost").onkeypress = function(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}

HTML：

<input placeholder="How far are you going? (miles)" id="distance">
<input placeholder="How many MPG does your car get?" id="mileage">
<input placeholder="What's the average cost of gas?" id="gasCost">

是否可以先定义函数并将其调用到每个 ID？是否可以对课程进行不同的处理？我对所有建议持开放态度，但我不想使用 jQuery。

4

2 回答 2

3

如果你想使用类，你可以这样做：

function keyHandler(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}
var elements = document.getElementsByClassName("yourclasshere");
for (var i = 0; i < elements.length; i++)
    elements[i].onkeypress = keyHandler;

（getElementsByClassName()返回一个列表，因此您必须遍历列表中的每个元素并分别将处理程序绑定到它们。）

或者，您可以将单个处理程序绑定到包含所有输入的父元素（可能是表单元素？）：

document.getElementById("someContainer").onkeypress = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (e.keyCode === 13 && e.target.tagName === "INPUT") {
        goButton();
    }
};

演示：http: //jsfiddle.net/9U9nn/

这是有效的，因为关键事件从源元素（您的输入）通过所有容器“冒泡”，直到它们到达文档。（因此，在最坏的情况下，您可以将处理程序直接绑定到文档。）您可以通过检查event.target（或event.srcElement对于较旧的 IE）来判断事件源自哪个元素。

于 2013-11-06T06:14:53.100 回答
-1 
function submitOnEnter(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}

document.getElementById("gasCost").onkeypress = submitOnEnter;
document.getElementById("mileage").onkeypress = submitOnEnter;

请注意，这已经是 HTML 表单中的默认行为：按 Enter 提交表单。

于 2013-11-06T06:14:31.807 回答