当前位置：文江博客话题详情

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

发布于 2025-02-09 00:03:39 字数 316 浏览 2 评论 0原文

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

仅一个输入组成的表单每次用户按下用户按下输入按钮 - 完美！
由两个文本输入组成的第二种形式并非以这种方式行为，当用户按两个输入处按ENTER按钮时，它不会提交。

有没有一种方法可以使形式具有多个文本输入以这种方式行事并避免在其中放上提交按钮？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沧笙踏歌 2025-02-16 00:03:39

尝试在＆lt; form＆gt;/form＆gt;标签

<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 ，它仍然移至下一个字段而不是选择它。没有时间来调试此问题，但是如果有人能弄清楚如何修复它，那就太酷了。

Try adding this between the <form></form> tags

<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, enter should automatically submit it, regardless of whether it's visible or not.

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)

$('#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.

回复收藏 0 原文

寂寞清仓 2025-02-16 00:03:39

我一直在寻找解决此问题的解决方案，并希望根据这里的许多帖子分享我的解决方案。（在现代铬/firefox/ie上进行测试）

因此，仅使用JavaScript使用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>

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)

So, using only Javascript the follow code submits the form if ENTER key is pressed on any field or if the button Submit is pressed. After that it clear/reset the form, which is a nice thing to do.

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>

回复收藏 0 原文

给我一枪 2025-02-16 00:03:39

确保您的输入在“表单”元素内部，并将“表单”元素作为“ action”属性。

回复收藏 0 原文

叶落知秋 2025-02-16 00:03:39

您将必须查找Enter键按下。这篇文章显示了如何做到这一点。
输入javascript中的键按事件

回复收藏 0 原文

私野 2025-02-16 00:03:39

您可以使用下面的代码在按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>

You can use the code below to submit a form after pressing 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>

回复收藏 0 原文

~没有更多了~