我正在尝试为表单元素创建一个方法，该方法允许定义在按下“enter”键并且表单获得焦点时将调用的函数。这是测试代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Teste Form Enter</title>
<script type="text/javascript" language="javascript">
Element.prototype.addEnterEvent = function(Func){
var me = this;
this.gotFocus = false;
this.addEventListener("focus", function(){ me.gotFocus = true; }, false);
this.addEventListener("focusOut", function() { me.gotFocus = false; }, false);
window.addEventListener("keyPress", function(e) { console.log("Hit!"); if(me.gotFocus && e.which==13) window[Func](); }, false);
}
function formHandler(){
alert("Anything: "+document.forms["test"].anything.value);
}
function ini(){
document.getElementById("test").addEnterEvent(formHandler);
}
</script>
</head>
<body onload="ini();">
<form name="test" id="test" onsubmit="return false;">
<label>Anything: </label>
<input type="text" name="anything" />
<br />
<button onclick="formHandler();" type="button">Hit Enter</button>
</form>
</body>
</html>
目的是如果按下回车键，按下按钮时将调用相同的函数。 没有错误消息，也没有期望的结果，只是什么也没有发生。我输入了 console.log 并且关键事件没有触发 - 所以什么也没有发生。为什么？
编辑:尝试使用建议，应该可以工作，但是表单是在运行 formHandler 后发送的，我不希望发生这种情况:
<script type="text/javascript" language="javascript">
function formHandler(formElement){
alert("Anything: "+formElement.elements.anything.value);
}
</script>
</head>
<body>
<form action="#" name="test" id="test" onsubmit="formHandler(); return false;" method="get">
<label>Anything: </label>
<input type="text" name="anything" />
<br />
<button onclick="formHandler();" type="submit">Hit Enter</button>
</form>
最佳答案
没有必要这样做。如果 <form>标签有 action属性和至少一个提交按钮，那么你可以使用onsubmit:
<form action="#" method="GET" onsubmit="formHandler(event, this); return false;">
<input type="text" name="foo">
<button type="button">Submit</button>
</form>
请注意<button type="button" />不管用。一定是<button type="submit" />或<input type="submit|image" />
编辑:稍微更改了 formHandler 方法，因此 form作为参数传递。另请参阅 onsubmit 的细微更改属性，传递this进入 formHandler 函数。
function formHandler(event, form) {
event.preventDefault();
alert(form.elements.foo.value);
}
编辑:更改了我答案中的代码以传递 event对象进入处理程序并调用 preventDefault() .
关于javascript - 当原型(prototype)为 "enter"时从表单调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23414375/