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

cha*_*nie 35 html forms html5 form-submit web

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

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

是否有办法使具有多个文本输入的表单这种方式运行并避免在其中设置提交按钮

use*_*130 41

尝试在<form></form>标签之间添加此项

<input type="submit" style="display: none" />
Run Code Online (Sandbox Code Playgroud)

测试它,它适用于Firefox和Chrome.如果表单中有提交输入类型,则enter无论是否可见,都应自动提交.


我实际上是在登录表单中使用它,但在用户名字段中,移动到下一个字段比提交更有意义.如果你有类似的用例,这里是我使用的代码(需要jQuery)

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});
Run Code Online (Sandbox Code Playgroud)

请注意,虽然有一个小错误 - 如果用户选择浏览器自动完成用户名并按下enter,它仍会移动到下一个字段而不是选择它.没有时间调试这个,但如果有人能弄清楚如何修复它,那将是很酷的.


小智 7

我正在寻找解决此问题的方法,并希望根据此处的许多帖子分享我的解决方案。(在现代 Chrome/Firefox/IE 上测试)

因此,如果在任何字段上按下 ENTER 键Submit按下按钮,则仅使用 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>
Run Code Online (Sandbox Code Playgroud)


小智 5

确保您的输入位于“form”元素内,并为“form”元素赋予“action”属性。