Question

标题不言自明......我有几种形式，其中一种只是一个文本输入形式，另一种是由两个文本输入组成。我不希望其中任何一个提交按钮，我希望每当用户在任何文本输入处按下ENTER按钮时提交每个表单：

每次用户按下ENTER按钮时，只有一个输入组成的表单提交 - 完美！
由两个文本输入组成的第二个表单不会以这种方式运行，当用户在任何两个输入处按下ENTER按钮时，它不会提交。

有没有办法让表单有多个文字输入以这种方式表现并避免在其中设置提交按钮？

Answer 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();
    }
});

请注意，虽然有一个小错误 - 如果用户选择浏览器自动填充用户名并按输入，它仍会移动到下一个字段而不是选择它。没有时间调试这个，但如果有人能弄明白如何修复它，那就太酷了。

Answer 2

您必须查找Enter键。这篇文章说明了如何做到这一点。 Enter key press event in JavaScript

Answer 3

我一直在寻找这个问题的解决方案，希望根据这里的很多帖子分享我的解决方案。（在现代Chrome / Firefox / IE上测试）

因此，如果按下按钮Submit，则仅使用Javascript，如果在任何字段或上按下ENTER键，则跟随代码会提交表单。之后清除/重置表单，这是一件好事。

希望它有所帮助。

<!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>

Answer 4

确保您的输入位于＆＃34; form＆＃34;元素并给出＆＃34;形式＆＃34;元素和行动＆＃34;属性。

Answer 5

按Enter键后，您可以使用下面的代码提交表单。

<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键后提交表单？

5 个答案: