HTML5: 如何在任何文本输入中按 ENTER 后提交表单？

Question

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

每次用户按下 ENTER 按钮时，仅由一个输入组成的表单就会提交 - 完美！
由两个文本输入组成的第二种形式不是这种方式，当用户在两个输入中的任何一个按下 ENTER 按钮时它都不会提交。

有没有一种方法可以使表单 具有多个文本输入 以这种方式运行并避免其中包含 提交按钮 ？

Answer 1

您将需要查找 Enter 键。 post 这里展示了如何做到这一点。 Enter key press event in JavaScript

Answer 2

确保您的输入在 "form" 元素内，并为 "form" 元素赋予 "action" 属性。

Answer 3

尝试在 <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，它仍会移动到下一个字段而不是选择它。没有时间调试这个，但如果有人能弄清楚如何修复它，那就太好了。

Answer 4

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

因此，仅使用 Javascript 如果在 any 字段 or 上按下 ENTER 键，则以下代码会提交表单按下按钮 Submit。之后它 clear/reset 表格，这是一件很好的事情。

希望对您有所帮助。

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

HTML5: How to make a form submit, after pressing ENTER at any of the text inputs?

html

forms

form-submit

web