HTML5：如何在任何文本输入处按 ENTER 后提交表单？
Posted
技术标签:
【中文标题】HTML5：如何在任何文本输入处按 ENTER 后提交表单？【英文标题】：HTML5: How to make a form submit, after pressing ENTER at any of the text inputs? 【发布时间】：2015-03-04 15:54:18 【问题描述】：标题不言自明...我有几个表单，其中一个只是一个文本输入表单，另一个由两个文本输入组成。我不希望其中任何一个提交按钮，只要用户在任何文本输入处按下ENTER按钮，我希望每个表单都提交：
-
每次用户按下 ENTER 按钮时，由一个输入组成的表单提交 - 完美！
由两个文本输入组成的第二个表单不会以这种方式运行，当用户在两个输入中的任何一个处按下 ENTER 按钮时，它都不会提交。
有没有办法让具有多个文本输入的表单以这种方式运行并避免在其中包含提交按钮？
【问题讨论】：
【参考方案1】：尝试在<form></form> 标签之间添加它
<input type="submit" style="display: none" />
经过测试，它可以在 Firefox 和 Chrome 上运行。如果表单中有提交输入类型，enter 应该会自动提交，无论它是否可见。
我自己实际上是在登录表单中使用它，尽管在用户名字段中，移动到下一个字段比提交更有意义。以防万一您有类似的用例，这是我使用的代码（需要 jQuery）
$('#username').keypress(function(event)
if (event.keyCode == 13 || event.which == 13)
$('#password').focus();
event.preventDefault();
);
请注意，虽然有一个小错误——如果用户选择浏览器自动完成用户名并按 enter，它仍会移动到下一个字段而不是选择它。没有时间调试这个，但如果有人能弄清楚如何修复它，那就太酷了。
【讨论】：
Neat，你在用“#password”输入做类似的事情吗？好奇而已！隐藏提交输入效果很好，我只需要一些简单的东西就可以了！ 我在表单上有一个可见的提交按钮，#password 字段不需要任何 JS 代码，因为按 Enter 会按预期自动提交表单。很高兴它有帮助:)
我猜如果您的#username 字段为空但您的#password 不是并且表单已提交，您会处理，对吧？ :) 谢谢，确实有帮助！【参考方案2】：
我一直在寻找这个问题的解决方案，并希望根据这里的许多帖子分享我的解决方案。 （在现代 Chrome/Firefox/IE 上测试）
因此，如果在 any 字段 或 上按下按钮 Submit 时按下 ENTER 键，以下代码仅使用 javascript 提交表单。之后它会清除/重置表单，这是一件好事。
希望对你有帮助。
<!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>
【讨论】：
【参考方案3】：确保您的输入位于“form”元素内，并为“form”元素赋予“action”属性。
【讨论】：
我正在捕获使用 jQuery 提交的表单，使用$( formId ).on('submit', function (e) ... ); 非常适合第一种情况（一个文本输入表单）。【参考方案4】：
您将不得不寻找 Enter 按键。这篇文章在这里展示了如何做到这一点。 Enter key press event in JavaScript
【讨论】：
【参考方案5】：您可以使用下面的代码在回车后提交表单。
<input id="videoid" placeholder="Enter the video ID">
<button id="mybutton" type="button" onclick="myFunction()">Submit</button>
<script>
var input = document.getElementById("videoid");
input.addEventListener("keyup", function(event)
if (event.keyCode === 13)
event.preventDefault();
document.getElementById("mybutton").click();
);
</script>
【讨论】：
以上是关于HTML5：如何在任何文本输入处按 ENTER 后提交表单？的主要内容，如果未能解决你的问题，请参考以下文章
MS Access Form - Enter 键未移动到新行
在 ROBOT Framework 中插入输入后如何按 TAB 或 ENTER 键
键盘输入时，如何在Ajax调用URL更改后停止MVC页面刷新
Mac OSX 中的文本大小比使用 Qt 的 Windows 小。我想在任何地方都有相同的尺寸