如何在输入中按下enter时阻止WebKit浏览器提交表单
在WebKit浏览器中，要阻止按下Enter键时提交表单，可以使用JavaScript代码来实现。以下是一个简单的示例：
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
// 在这里添加你的自定义操作
}
});这段代码会在用户按下Enter键时触发一个事件，并阻止默认的表单提交行为。你可以在// 在这里添加你的自定义操作的注释下添加自己的代码，以实现自定义的功能。
需要注意的是，这段代码需要在页面加载完成后才能生效，可以将其放在<script>标签中，并将该标签放在页面的底部。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
基于
4.10.21.2隐式提交
表单元素的默认按钮是按树顺序排列的第一个提交按钮，其表单所有者是该表单元素。
如果用户代理支持让用户隐式提交表单(例如，在某些平台上按下"enter“键，而文本控件是有焦点的，则隐式提交表单)，则对于默认按钮具有激活行为且未禁用的表单，必须使用户代理在该默认按钮上触发单击事件。
只有在有一种方法隐式提交表单的情况下，web上的页面才是可用的，因此强烈鼓励用户代理支持这一点。
如果表单没有提交按钮，那么如果表单有多个阻止隐式提交的字段，则隐式提交机制必须什么也不做，否则必须从form元素本身提交form元素。
我的期望是，当一个表单有多个输入元素
浏览 3提问于2022-02-15得票数 0
回答已采纳
我使用Firefox运行的HTML表单如下所示：
<form name="transfer" id = "transferForm" action='transfer.php' method='POST'>
<div>
<input id="itemSelect" name="itemSelect"/>
<input type="number" name="quantity" id="quantity&
浏览 5提问于2017-02-02得票数 1
回答已采纳
4回答
HTML规范对使用Enter键提交表单有什么规定？
我读过，但没有任何关于使用Enter键提交表单的内容。
它是在什么地方定义的，还是像大多数浏览器自己实现的那样，变成了the way to do it
我很好奇，因为我刚才问了一个问题，如果提交按钮被隐藏(display: none)，Webkit不会提交我的表单。
那么在官方文档中有没有引用表单中enter键的行为呢？
浏览 2提问于2011-11-10得票数 0
回答已采纳
我有一个使用JQuery的表单，我不认为我需要在这篇文章中放代码，这个问题很简单。
但是我想阻止用户在按Enter键或Return键时提交表单。
同时，我还使用了textareas，其中用户需要能够按Enter / Return键。
浏览 2提问于2009-09-15得票数 3
回答已采纳
3回答
当使用包含多个文本输入的表单时，WebKit/Safari/Google会在任何输入元素中按下“enter”时提交表单。即使没有提交输入元素，也没有注册的onclick处理程序。
例如，请参阅此示例代码：
<html>
<body>
<form method="POST" action=".">
<ul>
<li><input type="text" name="foo" value=&
浏览 6提问于2009-04-15得票数 0
回答已采纳
以下问题：
在我的网站上，我有两个表单。一个用于登录，一个用于主数据。我在主窗体中只有一个提交按钮。loginform在mainform提交时通过js提交。
这可以很好地工作。但在Safari中，我可以在焦点位于登录表单内时按Enter键。这将发送没有主表单的登录表单，因此我得到一个错误(它将我重定向到提交时请求的json的普通视图)。
是否可以禁用“按下enter键时”操作？
浏览 3提问于2009-12-15得票数 14
回答已采纳
我使用jquery在提交表单时调用操作。我还使用return false；来防止页面被刷新。然而，当我尝试重新提交表单时-它不起作用，但我需要它(例如，在字段中输入的新数据)。
目前，我使用的是这个结构：
<form action="" method="POST" id="myform">
<input type="text" name="test" value="test">
</form>
$(document).ready(function(){
浏览 2提问于2012-04-30得票数 2
2回答
我想输入表单，当按enter输入框时，它将提交表单。
$('input[type=text]').keypress(function(event) {
if(event.which == 13) {
//enter pressed
active($(this));
}
});
在android手机上进行测试，但是keypress无法检测到密钥。
如何阻止这种行为？非常感谢
浏览 3提问于2017-11-07得票数 0
回答已采纳
1回答
我有一个非常简单的表单，只有一个自动完成的小部件。没有提交按钮。我希望表单以这样的方式工作，当用户从自动完成中选择一个建议时，它提交表单，但不提交其他建议。问题是，每当我按enter键时，无论是否填写，表单都会自动提交。但是，如果我添加一个隐藏的文本输入框，问题就解决了，并且我只能通过从自动完成中选择一个建议来提交表单(通过这种机制提交是由一些jQuery处理的)。有没有一种更“优雅”的方式来关闭提交-返回功能？添加一个我实际上并不需要的隐藏文本输入，看起来肯定不是做这件事的“正确”方式，而且很可能是一个依赖于浏览器的修复(我使用的是Chrome)。
浏览 2提问于2011-09-20得票数 0
回答已采纳
我有以下代码，我试图迭代html文本输入元素，进行一些验证，并在验证失败时阻止表单提交：
$("#the_form").submit(function(){
$(":text", this).each(function(){
if($(this).val().length != 0)
{
var str = $
浏览 0提问于2011-05-23得票数 5
回答已采纳
<form method="POST" action="">
<input type="text" />
<input type="text" />
</form>
()
在input上按enter键。然后删除其中一个input并再次按它。当我们在表单中有两个输入时，表单不会被提交(然后我们需要一个按钮)。为什么会这样呢？
浏览 1提问于2011-12-11得票数 5
回答已采纳
外部形式：
<form #myForm="ngForm" (ngSubmit)="save(myForm.value, myForm.isValid)">
<tags-input></tags-input>
</form>
标签输入组件模板：
<input type="text" [(ngModel)]="newTag" (keyup.enter)="addTag(newTag, $event)">
标签输入组件：
addTag(newTag: any
浏览 0提问于2016-11-13得票数 2
1回答
目前，我的一个应用程序中有一个表单，它使用一个隐藏按钮来解决Android上数字键盘的问题。本质上，无论是按enter键还是聚焦按钮，都会提交表单。
按enter在Chrome (桌面)、Firefox (桌面)和Safari (iOS)中工作，并且只提交一次表单。在IE中，浏览器要提交两次表单，所以我只能假设当用户按enter键时，它会聚焦提交按钮。
下面是一个演示这个的例子。在我测试过的Chrome和其他浏览器中，它只会清除盒子。在IE中，它将警告“无效数量”。
HTML:
<form data-bind="submit: SubmitQuantity">
浏览 3提问于2014-03-12得票数 0
4回答
我有一个使用jQuery提交搜索的web表单。表单本身不会触发提交事件，因为我捕获了该事件并将其删除(这是一个更大、更复杂的表单的一部分，我正在使用渐进式增强来添加此功能)。
在iPhone上，一旦我的搜索输入被聚焦，浏览器就会自动放大它。在"enter“键事件中，搜索是通过javascript执行的，我模糊了输入，取消了屏幕上的iPhone键盘，但浏览器仍然放大到输入区域。
有没有一种方法可以通过javascript以编程方式触发再次缩小到初始视口区域？
编辑:在搜索执行时没有重定向，这通常会在新页面加载时重置视区-所有事情都发生在一个页面上。
浏览 2提问于2011-05-17得票数 36
使用传统的.NET Web表单，我有一个场景，用户希望在给定的文本框中按Enter键时计算值。这可以很好地工作，但是，按enter键也会触发页面上的默认表单提交按钮。
我试图通过将event.preventDefault()和return false添加到textbox的事件处理程序来解决此问题，但表单是在事件发生之前提交的，因此此代码没有任何影响。
$("input[type='text']").keypress(function (event) {
if (event.keyCode == 13) {
var regionId = $
浏览 1提问于2014-12-05得票数 0
3回答
我想要一个文本形式输入一个字符串，这是后来由javascript读取。
<form style='margin:10px;'>
Input Value: <input type="text" value="3" id="input" name="input"/>
</form>
我注意到，当我按enter时，当它被选中时，会导致页面重新加载。这不是我想要的。当表单被“提交”时，我如何使它不重新加载页面？
浏览 2提问于2011-04-28得票数 0
回答已采纳
我正在编写一个应用程序，需要用户输入一些信息到表单中，并提供了提交按钮。但是，如果用户在iphone/bb/android上按下"GO/Enter“按钮并再次按下submit按钮，我将得到一个错误，因为每个表单都与一个唯一的ID相关联，并且只能提交一次。如何在用户按下"GO/enter“后禁用提交按钮?？谢谢。
浏览 2提问于2010-07-14得票数 0
回答已采纳
我有一个表单，在输入文本框中，我输入一个数字并按enter，然后使用jQuery将该值附加到文本区域。一切都很好。
我遇到的问题是，如果我添加一个submit按钮来提交表单，只要我按ENTER键，它就会提交表单。
我想要做的不是在按enter时提交表单，而是只在单击submit按钮时提交表单。
我尝试使用preventDefault()并返回false，这将在按ENTER键时停止表单提交，但是如果我在submit按钮上添加一个单击事件来提交表单，它什么也不会做。在提交之前，我在click函数中放置了一个警告，这会触发，但表单不会提交
<form id="toteform"
浏览 3提问于2014-01-24得票数 1
回答已采纳
问题摘要: Chrome要求在提交表单前按两次“Enter”键。
血淋淋的细节:我有一个表单。它的行动是：
action="javascript: Search();"
我的表单中有一个文本输入。我在这个文本框中输入了一些内容。我按enter键。调用Search()。
Search()调用：
alert('A')
doPost(document.formName,'Search.php')
alert('B')
doPost(表单，url)调用：
form.action=url
alert('C')
form.su
浏览 0提问于2011-03-30得票数 1
3回答
这个bug/特性出现在我的一个页面中，它是在google chrome中查看的，所以我编写了一个测试页面，如下所示
<body>
<form action="loginhandler.php">
<input type="text" id="name">
<input type="text" id="lastname">
<input type="button" value="Login"&g
浏览 4提问于2010-08-04得票数 6
我有一个用asp.net/C#编写的简单表单，当我在表单的输入框中尝试按enter时，由于某种原因没有提交表单。我已经实现了对以前的一个错误的修复，其中按enter只会刷新页面，而不提交表单数据，但现在按enter什么也不做，修复如下：
<div style="display: none">
<input type="text" name="hiddenText" />
</div>
有人知道解决这个问题的方法或解决办法吗？
浏览 2提问于2010-01-23得票数 3
回答已采纳
5回答
我有一个<form>元素围绕着几个输入：
<form>
<div class="tr" id="widget306">
<div class="td col-grab">
<button type="button" class="button grab formwidget" id="widget611">m</button>
</div>
<div class
浏览 3提问于2012-02-17得票数 3
回答已采纳
2回答
我有一个带有两个按钮的表单，一个是input[type=submit]，另一个是普通的button，即cancel按钮。
我有两个事件处理程序，一个绑定到submit上的form，另一个绑定到click上的button。
当我通过在输入中按enter来提交表单时，按钮上的click事件会触发(在submit事件之前，我可能会添加)，这是为什么？
这在gecko和webkit中都会发生。
下面是一个有效的示例：
如果通过按enter键提交，我希望触发提交事件，而不是单击事件。
浏览 0提问于2012-08-01得票数 8
回答已采纳
2回答
我使用的是Chrome，按enter会自动提交表单。
我在不同的页面上有两个表单，而且都没有提交输入/按钮。这两个表单都有相似的(文本)输入。
按enter时，FORM 1会自动提交其数据。另一方面，FORM 2没有，我必须找出为什么会发生这种情况。有没有办法找出这两个表单附加了哪些提交处理程序？
在这两种情况下，myForm.get(0).onsubmit (使用jQuery)都会返回null。
或者，有没有其他方法来调试这个问题？
浏览 3提问于2013-07-23得票数 0
回答已采纳
我刚刚发现，只包含一个输入(不是隐藏的)的表单会在按Enter时自动提交。
但当按enter键时，包含至少两个输入(未隐藏)的表单将不会提交。
(所有脚本中都没有submit/button/inputtype=submit )
看看这个。对此行为有没有一个解释/标准？
<form id="form1" method="POST">
<p>Does submit:</p>
<input type="text" placeholder="focus and press enter
浏览 0提问于2013-07-23得票数 21
回答已采纳
6回答
我有两个按钮，一个是id=enterToSubmit，另一个是id=clickToSubmit。当用户点击Enter键时，我希望"enterToSubmit“按钮而不是"clickToSubmit”按钮提交表单。
在同一个页面上，我有一个文本框id=title，在页面加载时，我隐藏了"enterToSubmit“按钮，直到用户在文本框中输入内容，然后用户可以点击Enter键提交表单。
当用户按回车键时，预览"clickToSubmit“按钮如何提交？
浏览 1提问于2010-11-02得票数 10
回答已采纳
我想通过按Enter键提交多行文本，并且在提交之前可以查看全文。我知道有两种使用textarea和input type=text提交表单的方法，但这两种方法都不符合我的要求。请帮帮忙！
Note: Submit button is hidden
带有textarea.It的表单显示全文，但当我按Enter按钮时，它会创建一个新行，而不是提交。
<form data-ng-submit="sendMessage(message)" >
<textarea data-ng-model="message" placeholder="
浏览 1提问于2013-11-03得票数 0
我使用锚点作为链接，并绑定enter/return键来提交表单，如下所示：
$("form[name!=smsform]").bind("keyup", function(e){
if(e.keyCode == 13){
$(this).submit();
});
$("a[title=submit]").click( function(){
$(this).parents("form").submit();
});
然而，当使用上面的代码单击enter/return时，表单提交了两次，我需要合并这两个片段-有人知道怎么做吗？
浏览 1提问于2010-02-19得票数 4
回答已采纳
有人能解释这种行为吗？在HTML表单的文本框中按Enter键可在表单包含单个文本框时提交表单，但不能在表单包含两个或多个文本框时提交表单。
jsFiddle (一个输入)：
jsFiddle (两个输入)：
浏览 1提问于2011-06-12得票数 11
在输入框中，如果按RETURN/ENTER，则提交表单。在文本区域中，按RETURN会产生一个换行符。如何在返回时按下键盘键，而不是生成换行符，提交表单并在SHIFT+RETURN中生成换行符？(就像fb和其他网站一样)
有没有什么办法只用HTML就能做到呢？如果不是，如何使用JS来完成呢？
这就是我现在正在尝试的：
$('#conversationForm textarea').keydown(function(e) {
e = e || event;
if(e.keyCode == 13 && !e.shiftKey) {
$
浏览 2提问于2012-11-18得票数 1
回答已采纳
6回答
表单提交
、、、
在此函数中，根据输入的值，表单提交是true/false。为什么此函数中的return true不起作用？
基本上，我的if语句测试表单输入中的问号。如果有，那么我不希望表单提交给search.php。如果没有问号else语句，那么我希望表单提交给search.php。我试着使用return true；让.form1提交，但不起作用。然后我尝试了$('.form1').submit()，但这使它在按enter之前提交。
<script>
$(".askInput").keyup(functio
浏览 0提问于2011-04-04得票数 0
回答已采纳
嗨，我正在尝试制作一个jquery ajax提交表单，并且我目前正在尝试对提交表单进行限制。我希望用户按enter键提交表单，而不是按submit按钮，但只有当用户专注于文本区域/输入字段时，他/她才会按enter键提交表单！
我尝试编写自己的代码，并在其中进行编辑，看看是什么工作，我已经弄清楚了这段代码，但它工作得不是很好:(
$('.addformtextarea').focus(function() {
$(document).keyup(function(e){
switch (e.keyCode) {
case 13: //enter
浏览 2提问于2011-11-01得票数 0
回答已采纳
4回答
我有一个表单与一个隐藏的提交按钮和一个文本输入。在文本输入中，使用jQuery将提交表单的更改事件附加到它。问题是，如果我在输入上按enter，那么表单会提交两次。我认为这是因为enter提交表单，而输入检测到更改事件，然后再次提交表单。我有两个问题：-我的想法正确吗？-我如何解决这个问题？
这是javascript：
$("input.price").live('change', function () {
$(this).closest('form').submit();
});
编辑:我认为e.preventDefault()阻止了事件
浏览 5提问于2013-03-13得票数 1
回答已采纳
1回答
我有一个要求提交一份表格按下输入按钮。我想定制它的方式，使它可以在任何地方使用我的应用程序。因此，每当我在输入字段值后按enter。我可以提交当前的表格。在特定字段上按下ENTER按钮时，是否存在获取当前表单(不知道表单名称或id)的方法？
浏览 1提问于2017-05-02得票数 0
回答已采纳
我有一个小应用程序，它通常只有一个可见的文本输入，按enter会触发一个JavaScript方法，而不会触发普通的表单提交。下面是一个非常简单的测试用例：
<form onsubmit="document.write('form submitted!');return false">
<input type="text">
<input type="submit" style="display:none">
</form>
在桌面浏览器上，这是预期的-
浏览 4提问于2012-06-02得票数 0
在我的网站上，我在一个表单中有几个输入域。我希望用户能够通过按enter键在任何字段上提交表单。但是，这会导致一个问题，因为在Internet Explorer和Safari中，如果用户键入几个字母，然后打开一个自动完成下拉列表，然后使用箭头键并按enter进行自动完成，则表单将会提交。
如何更改此行为？
还请注意，我有一个用于“提交”的自定义函数。它不是默认的提交。
下面是我的jQuery代码：
$('.submitButton').click( submitContactForm );
$('.column input, .submitButton').k
浏览 3提问于2011-10-27得票数 1
回答已采纳
我使用的是jQuery，我想让用户在向搜索字段中输入数据后按enter键开始搜索。
我使用了以下代码：
$('#textSearch').keyup(function (event) {
if (event.keyCode == '13') {
doSearch();
}
return false;
});
它在Firefox和IE中运行得很好，但在Safari中就完全不行了。发生的情况是，当我在safari中点击enter时，
浏览 1提问于2010-10-03得票数 8
回答已采纳
在表单中输入一个文本后，一旦按下ENTER键，下面的代码就可以很好地提交表单：
<!DOCTYPE html>
<html>
<head>
<script>
document.querySelector("form").addEventListener("submit");
</script>
</head>
<body>
<form name="myForm" action="#" method="post"&
浏览 2提问于2018-01-07得票数 1
1回答
我有一个具有简单输入和select2输入的表单，如下所示：
当第一个输入被聚焦时，按enter键应该提交表单(在本例中，重定向到404页)。
由于某些原因，多个select2输入会阻止表单提交。如果删除select2类或multiple属性，表单将正常运行。
在Mac上对Safari、Chrome和Firefox进行了测试，并且在所有浏览器上都是一致的。
(我使用的是jQuery 2.1.3和select2 4.0.1)
浏览 5提问于2016-02-02得票数 6
回答已采纳
简单的例子：
<%= form_for :post, url: posts_path do |f|%>
<p>
<%= f.label :title%><br/>
<%= f.text_field :title%>
</p>
<p>
<%= f.label :text%><br/>
<%= f.text_area :text%>
</p>
<p>
浏览 0提问于2013-12-24得票数 13
回答已采纳
我有一个表单，其中有一个提交按钮。当我按enter键时，表单被提交。到现在为止还好。 但是，如果用户检查表单中的某个值，则会显示form-section OPT。此部分包括输入字段和一个“添加到列表”按钮。 我想要实现的是，当OPT form-section打开时，用户单击enter键，那么应该单击"add to list“按钮，而不是"submit按钮”。 如何做到这一点？
浏览 14提问于2021-07-22得票数 0
1回答
好吧，在问这个问题之前，我确信在stackoverflow上已经有了这个问题的答案……但是我找不到任何东西，所以我这样说：
我正在使用flask创建一个网站。其中的一部分就是发表评论。
当我单击enter时，它应该提交表单以将注释添加到数据库。
下面是我的代码：
(这是表格)
<form method="POST">
{{ form.hidden_tag() }}
{% if form.comment.errors %}
{{ form.comment(id="comment-input", class="
浏览 0提问于2018-12-29得票数 0
我有一个超级简单的表格：
<form>
<input name="name" placeholder="Your name" required>
<input name="email" type="email" placeholder="Your email" required>
<input type="submit" value="Submit">
</form>
我使用一些jQuery (Cof
浏览 0提问于2013-08-10得票数 0
回答已采纳
2回答
我有一些角度6的形式，我集中在第一个可用的字段。它们包含一个submit按钮，当我按enter键时，表单将自动提交并触发ngSubmit事件。
有一个特定的形式，它只包含一个无线电组，而我没有专注于任何领域。在这种情况下，不会触发ngSubmit。
如果单击单选按钮，然后按enter键，则表单将正确提交。
即使表单中的任何字段都没有焦点，是否有任何方法使表单在输入时提交？我应该以某种方式关注表单本身吗？
表格：
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<mat-radio-gr
浏览 0提问于2018-09-26得票数 5
2回答
我目前有一个登录按钮，onclick，显示一个加载图标2秒，然后显示一个隐藏的div，隐藏的div也是表单的一部分，并包含一个实际提交表单的最终提交按钮。登录按钮只显示隐藏的div。我希望能够在表单的密码部分按enter，这将按下按钮，这将触发此功能，如下所示。
function showDiv() {
document.getElementById('SteamLogin').style.display = "none";
document.getElementById('loadingGif').style.display = "bl
浏览 1提问于2017-08-05得票数 0
我希望按下enter，以便焦点从当前更改到下一个输入。我做过但我有麻烦了。当按下enter时，表单将提交。
$('.length_input input[type=text], .qty').keypress(function(event) {
if(event.which == 13) {
//enter pressed
active($(this));
}
});
如何允许输入按下输入，但阻止提交表单？我有一个提交按钮来提交表格。
浏览 0提问于2015-09-24得票数 0
回答已采纳
我有一个只包含selectOneMenu输入和提交按钮的表单。当我在selectOneMenu中按Enter键时，没有任何反应。如果我在表单中有一个文本输入，当我按Enter键并且焦点在文本输入中时，表单就会提交，但是如果焦点在selectOneMenu中，表单就永远不会提交。
您可以在此处的PrimeFaces ShowCase中看到相同的行为：
有没有办法让selectOneMenu输入中的Enter提交表单？如果菜单没有显示，Enter应该只提交表单，因为Enter here用于选择一个值。
我曾尝试使用jQuery来捕获按键，但在按Enter时从未调用过它--其他的按键都被捕获了。
我
浏览 0提问于2016-02-10得票数 0
2回答
我有一个带有一些文本输入字段的表单(假设FirstName和LastName来保持它的简单性)，然后在表单底部有一个提交输入字段(其值为In)。
当我在其中一个文本字段中键入某些内容(比如输入John作为FirstName)，然后按键盘上的Enter键时，它会自动触发submit输入字段，就好像我实际上已经单击了登录按钮一样。
我理解它为什么要这样做，但是我需要在周围找到一个工作，这样如果按下Enter，我就可以在我的表单的其余部分继续输入。我不想在有人点击登录之前提交表格。
我读过一个建议，比如将<input type="submit" value="Sign
浏览 1提问于2018-09-19得票数 0
回答已采纳
我有一个正在设置的AJAX表单，它使用一个设置了jQuery .click操作的<input type="button">。
问题是，因为表单中没有<input type="submit">，所以表单不是以传统的方式提交的，所以表单验证器并不总是有效的，按enter按钮什么也不做。
如果我添加了一个提交输入，当它被单击(或者按回车键等)时，页面会重新加载，就好像它不是一个AJAX表单一样。
这里我漏掉了什么？
浏览 2提问于2010-11-24得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
