Question

这是有效的代码（但重复）。我试图用“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">

是否可以定义功能优先＆amp;把它叫到每个ID？是否有可能以不同的方式进行课程？我对所有建议持开放态度，但我不想使用jQuery。

Answer 1

如果您想使用课程，可以这样做：

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（或旧版IE的event.srcElement）来判断事件源自哪个元素。

Answer 2

function submitOnEnter(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}

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

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

如何保持干燥 - 在按键上触发相同功能的多个输入？

2 个答案: