Javascript 防止在点击文本的 Enter 键时提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30384571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent form submission on hitting Enter key for Text
提问by AbuMariam
I know this question has been asked before but I could not find a satisfactory answer for my situation. So I am asking again.
我知道以前有人问过这个问题，但我找不到适合我的情况的满意答案。所以我又来问了。
I have a simple form with 2 text boxes and a submit button. After the user enters text in either text box they should not be able to submit through the Enter key, only the submit button should allow them to submit. I thought trapping the enter keypress and returning false from the onChange event handler would do the trick but apparently not, this still causes a form submission...
我有一个带有 2 个文本框和一个提交按钮的简单表单。用户在任一文本框中输入文本后，他们将无法通过 Enter 键提交，只有提交按钮应允许他们提交。我认为捕获输入键并从 onChange 事件处理程序返回 false 可以解决问题，但显然不是，这仍然会导致表单提交......
function doNotSubmit(element) {
alert("I told you not to, why did you do it?");
return false;
}
</script>
<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>
<tbody>
<tr>
<td>
Joe: <input id="JoeText" type="text" onChange="doNotSubmit(this)">
</td>
<td>
Schmoe: <input id="SchmoeText" type="text" onChange="doNotSubmit(this)" >
</td>
</tr>
</tbody>
</table>
<input type=submit>
I tested on both Chrome and FF (latest versions).
我在 Chrome 和 FF（最新版本）上进行了测试。
Can you please show me how to prevent the form submission?
你能告诉我如何阻止表单提交吗？
Thanks.
谢谢。
回答by devkaoru
to piggy back on @Dasein's anwser you want to prevent the default behavior instead of stopping propagation ( i.e. returning false):
要搭载@Dasein 的 anwser，您希望阻止默认行为而不是停止传播（即返回 false）：
document.getElementById("myForm").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
alert("I told you not to, why did you do it?");
e.preventDefault();
}
}<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>
<tbody>
<tr>
<td>
Joe: <input id="JoeText" type="text">
</td>
<td>
Schmoe: <input id="SchmoeText" type="text" >
</td>
</tr>
</tbody>
</table>
<input type=submit>回答by user2755140
I think this should do:
我认为应该这样做：
document.getElementById("myInput").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
alert("I told you not to, why did you do it?");
return false;
}
}
回答by Roberto
If you include a submit button then the default form behavior is to submit on enter key. To prevent accidental submissions you could add a confirm dialog to the onsubmit event (form A). Another alternative is to replace the submit button with your own (form B). However, the user would then need to click the button to submit.
如果您包含提交按钮，则默认表单行为是在输入键时提交。为了防止意外提交，您可以向 onsubmit 事件（表单 A）添加一个确认对话框。另一种选择是用您自己的（表单 B）替换提交按钮。但是，用户随后需要单击按钮进行提交。
Run snippet to test(Tested in Chrome, Firefox, and IE 5-11)
运行代码段进行测试（在 Chrome、Firefox 和 IE 5-11 中测试）
<html>
<body>
Form A: This form submits on enter key
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')">
<input type="text" >
<input type="text" >
<input type="submit">
</form>
<p>
Form B: This form submits only on button click<br>
<form action="hanlder.aspx" method="post" >
<input type="text" >
<input type="text" >
<input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()">
</form>
</body>
</html>