Html HTML5：如何在任何文本输入处按 ENTER 后提交表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27807853/
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
HTML5: How to make a form submit, after pressing ENTER at any of the text inputs?
提问by charliebrownie
The title speaks for itself... I have a couple of forms, one of them is just a single text input form and the other one is composed by two text inputs. I do not want any submit buttonin any of them, I want each form to submit whenever the user presses the ENTER button at any text input:
标题不言自明......我有几个表单，其中一个只是一个单一的文本输入表单，另一个由两个文本输入组成。我不希望其中任何一个提交按钮，我希望每个表单在用户在任何文本输入处按下 ENTER 按钮时提交：
- The form composed by just one input submits everytime the user presses the ENTER button - Perfect!
- The second form composed by two text inputs does not behave this way, it does not submit when the user presses the ENTER button at any of both inputs.
- 每次用户按下 ENTER 按钮时，仅由一个输入组成的表单就会提交 -完美！
- 由两个文本输入组成的第二个表单不会以这种方式运行，当用户在两个输入中的任何一个上按下 ENTER 按钮时，它都不会提交。
Is there a way to make a form with more than one text inputbehave this way and avoid having a submit buttonin it?
有没有办法使具有多个文本输入的表单以这种方式运行并避免其中包含提交按钮？
回答by user193130
Try adding this between the <form></form>tags
尝试在<form></form>标签之间添加这个
<input type="submit" style="display: none" />
Tested it and it works on Firefox and Chrome. If you have a submit input type in the form, entershould automatically submit it, regardless of whether it's visible or not.
经过测试，它适用于 Firefox 和 Chrome。如果表单中有提交输入类型，enter则应自动提交它，无论它是否可见。
I am actually using this myself in a login form, though in the username field, it makes more sense to move to the next field than to submit. Just in case you have a similar use case, here's the code I used (requires jQuery)
我实际上在登录表单中使用它，尽管在用户名字段中，移动到下一个字段比提交更有意义。以防万一您有类似的用例，这是我使用的代码（需要 jQuery）
$('#username').keypress(function(event) {
if (event.keyCode == 13 || event.which == 13) {
$('#password').focus();
event.preventDefault();
}
});
Note that there is a slight bug though -- if the user selects a browser autocomplete username and presses enter, it still moves to the next field instead of selecting it. Didn't have time to debug this, but if someone can figure out how to fix it, that would be cool.
请注意，虽然有一个小错误——如果用户选择浏览器自动完成用户名并按下enter，它仍然会移动到下一个字段而不是选择它。没有时间调试这个，但如果有人能弄清楚如何修复它，那会很酷。
回答by user3058813
I was looking for a solution to this problem and want to share my solution, based on many posts over here. (Tested on modern Chrome/Firefox/IE)
我正在寻找解决此问题的方法，并希望根据此处的许多帖子分享我的解决方案。（在现代 Chrome/Firefox/IE 上测试）
So, using only Javascript the follow code submits the form if ENTER key is pressed on anyfield orif the button Submitis pressed. After that it clear/reset the form, which is a nice thing to do.
因此，如果在任何字段上按下 ENTER 键或Submit按下按钮，则仅使用 Javascript 以下代码将提交表单。之后它清除/重置表单，这是一件好事。
Hope it helps.
希望能帮助到你。
<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<div onKeyPress="return myFunction(event)">
<form id="form01" action="demo_form.asp" onsubmit="return false;" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="myFunction(0)">
</form>
</div>
<script>
function myFunction(e) {
if((e && e.keyCode == 13) || e == 0) {
alert("The form was submitted");
document.forms.form01.submit();
document.forms.form01.fname.value = ""; // could be form01.reset as well
}
}
</script>
</body>
</html>
回答by Ahmadbaba46
Be sure that your inputs are inside "form" element and give the "form" element an "action" attribute.
确保您的输入位于“form”元素内，并为“form”元素提供“action”属性。
回答by Jeremiah Jessel
You will have to look for the Enter key press. This post here shows how to do that. Enter key press event in JavaScript
您将不得不寻找 Enter 键按下。这里的这篇文章展示了如何做到这一点。 在 JavaScript 中输入按键事件
