通过点击回车键阻止用户提交表单

您可以创建一个JavaScript方法来检查输入键是否被命中，如果是，则停止提交。

<script type="text/javascript">function noenter() {return !(window.event && window.event.keyCode == 13); }</script>

只需在提交方法上调用它。

您可以使用以下方法

$(document).ready(function() {$(window).keydown(function(event){if(event.keyCode == 13) {event.preventDefault();return false;}});});

在阅读原始帖子的评论时，为了使其更有用，并允许人们在完成所有字段后按输入：

function validationFunction() {$('input').each(function() {...
}if(good) {return true;}return false;}
$(document).ready(function() {$(window).keydown(function(event){if( (event.keyCode == 13) && (validationFunction() == false) ) {event.preventDefault();return false;}});});

与其阻止用户按下输入，这可能看起来不自然，你可以保持表单原样并添加一些额外的客户端验证：当调查未完成时，结果不会发送到服务器，用户会收到一条漂亮的消息，告诉需要完成什么才能完成表单。如果你使用的是jQuery，请尝试验证插件：

http://docs.jquery.com/Plugins/Validation

这将比捕捉输入按钮需要更多的工作，但它肯定会提供更丰富的用户体验。

在对其他解决方案感到沮丧之后，这对我来说在所有浏览器中都有效。name_space外部函数只是为了远离声明全局变量，我也推荐这一点。

$(function() {window.name_space = new name_space();}); //jquery doc readyfunction name_space() {this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);
this.stifle = function(event) {event.cancelBubble;event.returnValue = false;if(this.is_ie === false) {event.preventDefault();}return false;}
this.on_enter = function(func) {function catch_key(e) {var enter = 13;if(!e) {var e = event;}keynum = GetKeyNum(e);if (keynum === enter) {if(func !== undefined && func !== null) {func();}return name_space.stifle(e);}return true; // submit}
if (window.Event) {window.captureEvents(Event.KEYDOWN);window.onkeydown = catch_key;}else {document.onkeydown = catch_key;}
if(name_space.is_ie === false) {document.onkeypress = catch_key;}}}

样品使用：

$(function() {name_space.on_enter(function () {alert('hola!');});});

禁止在任何地方输入键

如果表单中没有<textarea>，那么只需将以下内容添加到<form>中：

<form ... onkeydown="return event.key != 'Enter';">

或者使用jQuery：

$(document).on("keydown", "form", function(event) {return event.key != "Enter";});

这将导致表单中的每一次按键都将在key上被选中。如果不是Enter，那么它将返回true，一切照常进行。如果是Enter，那么它将返回false，一切都会立即停止，因此表单不会提交。

keydown事件比keyup更受欢迎，因为keyup阻止表单提交为时已晚。历史上也有keypress，但这已被弃用，keyup0也是如此。您应该使用keyup1来代替，它返回正在按下的键的名称。当Enter被选中时，这将检查13（正常输入）和108（数字输入）。

请注意，在其他一些答案中建议的$(window)而不是$(document)不适用于IE<=8中的keydown/keyup，因此如果您也想覆盖那些贫困用户，这不是一个好的选择。

只允许在文本区域输入键

如果表单中有<textarea>（当然应该接受回车键），则将keydown处理程序添加到每个不是<textarea>的单独输入元素。

<input ... onkeydown="return event.key != 'Enter';"><select ... onkeydown="return event.key != 'Enter';">...

为了减少样板文件，最好使用jQuery完成：

$(document).on("keydown", ":input:not(textarea)", function(event) {return event.key != "Enter";});

如果您在这些输入元素上附加了其他事件处理程序函数，出于某种原因，您也希望在回车键上调用这些函数，那么只防止事件的默认行为而不是返回false，因此它可以正确地传播到其他处理程序。

$(document).on("keydown", ":input:not(textarea)", function(event) {if (event.key == "Enter") {event.preventDefault();}});

只允许在文本区域输入键和提交按钮

如果您也想在提交按钮<input|button type="submit">上允许回车键，那么您可以随时改进选择器，如下所示。

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {// ...});

请注意，在其他一些答案中建议的input[type=text]不包括那些HTML5非文本输入，所以这不是一个好的选择器。

一个简单的jQuery解决方案：

$("form").bind("keypress", function (e) {if (e.keyCode == 13) {return false;}});

为了防止表单被提交，我必须捕获与按下键相关的所有三个事件：

    var preventSubmit = function(event) {if(event.keyCode == 13) {console.log("caught ya!");event.preventDefault();//event.stopPropagation();return false;}}$("#search").keypress(preventSubmit);$("#search").keydown(preventSubmit);$("#search").keyup(preventSubmit);

您可以将上述所有内容组合成一个漂亮的紧凑版本：

    $('#search').bind('keypress keydown keyup', function(e){if(e.keyCode == 13) { e.preventDefault(); }});

给表单一个“javascript： ull（0）；”的动作似乎可以做到这一点

<form action="javascript:void(0);"><input type="text" /></form><script>$(document).ready(function() {$(window).keydown(function(event){if(event.keyCode == 13) {alert('Hello');}});});</script>

我有一个类似的问题，我有一个带有“ajax文本字段”（Yii CGridView）的网格，只有一个提交按钮。每次我在文本字段上搜索并点击输入提交的表单时。我必须对按钮做些什么，因为它是视图之间唯一的公共按钮（MVC模式）。我所要做的就是删除type="submit"并放置onclick="document.forms[0].submit()

在我的具体情况下，我不得不停止ENTER提交表单并模拟单击提交按钮。这是因为提交按钮上有一个单击处理程序，因为我们在模态窗口中（继承了旧代码）。无论如何，这是我对这种情况的组合解决方案。

    $('input,select').keypress(function(event) {// detect ENTER keyif (event.keyCode == 13) {// simulate submit button click$("#btn-submit").click();// stop form from submitting via ENTER key pressevent.preventDefault ? event.preventDefault() : event.returnValue = false;}});

这个用例对于使用IE8的人特别有用。

用途：

// Validate your form using the jQuery onsubmit function... It'll really work...
$(document).ready(function(){$(#form).submit(e){e.preventDefault();if(validation())document.form1.submit();});});
function validation(){// Your form checking goes here.}
<form id='form1' method='POST' action=''>// Your form data</form>

这对我有用

jQuery.each($("#your_form_id").find('input'), function(){$(this).bind('keypress keydown keyup', function(e){if(e.keyCode == 13) { e.preventDefault(); }});});

如果你使用脚本来执行实际的提交，那么你可以像这样在on提交处理程序中添加“返回false”行：

<form onsubmit="return false;">

从JavaScript调用表单上的提交（）不会触发事件。

我认为它已经包含了所有的答案，但是如果你使用一个带有一些JavaScript验证代码的按钮，你可以设置表单的onkeypress以按预期调用你的提交：

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

onkeypress JS可以是您需要做的任何事情。不需要更大的全局更改。如果您不是从头开始编写应用程序的人，并且您被要求修复其他人的网站而没有将其拆开并重新测试，则尤其如此。

我想添加一点CoffeeScript代码（未经现场测试）：

$ ->$(window).bind 'keypress', (event) ->if event.keyCode == 13unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]event.preventDefault()

（我希望你喜欢除非从句中的漂亮技巧。

我需要防止只提交特定的输入，所以我使用了一个类选择器，让它成为一个“全局”功能，无论我需要它。

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

还有这个jQuery代码：

$('.idNoEnter').keydown(function (e) {if (e.keyCode == 13) {e.preventDefault();}});

或者，如果keydown不足：

$('.idNoEnter').on('keypress keydown keyup', function (e) {if (e.keyCode == 13) {e.preventDefault();}});

一些备注：

在这里修改了各种好的答案，输入键似乎适用于所有浏览器上的keydown。对于替代方案，我将bind()更新为on()方法。

我是类选择器的忠实粉丝，权衡所有的利弊和性能讨论。我的命名约定是“id的东西”，表示jQuery将其用作ID，将其与CSS样式分开。

用途：

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {if(e.keyCode == 13) {e.preventDefault();return false;}});

此解决方案适用于网站上的所有表单（也适用于使用Ajax插入的表单），仅防止输入文本中的输入。将其放在文档就绪函数中，终身忘记这个问题。

我还不能发表评论，所以我会发布一个新的答案

接受的答案是ok-ish，但它并没有停止提交numpad回车。至少在当前版本的Chrome。我不得不改变键盘代码条件，然后它的工作原理。

if(event.keyCode == 13 || event.keyCode == 169) {...}

在我的例子中，我在表单中有几个jQueryUI自动完成字段和文本区域，所以我绝对希望它们接受输入。所以我从表单中删除了type="submit"输入并添加了一个锚点<a href="" id="btn">Ok</a>。然后我将其设置为按钮并添加了以下代码：

$( '#btn' ).click( function( event ){event.preventDefault();if ( validateData() ){$( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );}return false;});

如果用户填写了所有必填字段，则validateData()成功并提交表单。

一些我没有看到的答案在这里：当你通过页面上的元素时，当你到达提交按钮时按下输入将触发表单上的on提交处理程序，但它会将事件记录为MouseEvent。这是我涵盖大多数基础的简短解决方案：

这不是一个与jQuery相关的答案

超文本标记语言

<form onsubmit="return false;" method=post><input type="text" /><br /><input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" /><input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" /></form>

javascript

window.submitMouseOnly=function(evt){let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();}

找到一个工作示例：https://jsfiddle.net/nemesarial/6rhogva2/

完全不同的方法：

1. 表单中的第一个<button type="submit">将在按下enter时激活。
2. 这是真的，即使按钮被隐藏style="display:none;
3. 该按钮的脚本可以返回false，这会中止提交过程。
4. 您仍然可以使用另一个<button type=submit>来提交表单。只需返回true即可级联提交。
5. 在真正的提交按钮聚焦时按下输入将激活真正的提交按钮。
6. 在<textarea>或其他表单控件中按输入将正常工作。
7. 在<input>表单控件中按输入将触发第一个<button type=submit>，它返回false，因此什么都不会发生。

因此：

<form action="..."><!-- insert this next line immediately after the <form> opening tag --><button type=submit onclick="return false;" style="display:none;"></button>
<!-- everything else follows as normal --><!-- ... --><button type=submit>Submit</button></form>

这是我的解决方案，以达到目标，它是干净和有效的。

$('form').submit(function () {if ($(document.activeElement).attr('type') == 'submit')return true;else return false;});

如果您希望它在表单中提交数据，只需将脚本放入输入（类型=按钮）或添加事件监听器即可。

最好用这个

<input type="button">

比使用这个

<input type="submit">

1. 不要将type="提交"用于输入或按钮。
2. 使用type="按钮"并使用js[JQuery/Angular/etc]将表单提交到服务器。

仅阻止提交，而不是回车键的其他重要功能，例如在<textarea>中创建新段落：

window.addEventListener('keydown', function(event) {//set default value for variable that will hold the status of keypresspressedEnter = false;
//if user pressed enter, set the variable to trueif (event.keyCode == 13)pressedEnter = true;
//we want forms to disable submit for a tenth of a second onlysetTimeout(function() {pressedEnter = false;}, 100)
})
//find all formsvar forms = document.getElementsByTagName('form')
//loop through formsfor (i = 0; i < forms.length; i++) {//listen to submit eventforms[i].addEventListener('submit', function(e) {//if user just pressed enter, stop the submit eventif (pressedEnter == true) {updateLog('Form prevented from submit.')e.preventDefault();return false;}
updateLog('Form submitted.')})}
var log = document.getElementById('log')updateLog = function(msg) {log.innerText = msg}

input,textarea {display: inline-block;margin-bottom: 1em;border: 1px solid #6f6f6f;padding: 5px;border-radius: 2px;width: 90%;font-size: 14px;}
input[type=submit] {background: lightblue;color: #fff;}

<form><p>Sample textarea (try enter key):</p><textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/><p>Sample textfield (try enter key):</p><input type="text" placeholder="" /><br/><input type="submit" value="Save" /><h3 id="log"></h3></form>

第4.10.22.2节默示提交的W3C HTML5规范说：

form元素的默认按钮是树序中的第一个提交按钮，其表单所有者是form元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时点击“enter”键隐式提交表单），那么对于默认按钮具有定义的激活行为的表单，这样做必须导致用户代理在该默认按钮上为运行合成点击激活步骤。

备注：因此，如果默认按钮被禁用，则在使用这种隐式提交机制时不会提交表单。（禁用按钮时没有激活行为。）

因此，禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮放置为表单中的第一个提交按钮：

<form action="..."><!-- Prevent implicit submission of the form --><button type="submit" disabled style="display: none" aria-hidden="true"></button>
<!-- ... -->
<button type="submit">Submit</button></form>

这种方法的一个很好的特性是它可以工作没有javascript；无论是否启用JavaScript，都需要一个符合标准的Web浏览器来防止隐式表单提交。

这里已经有很多很好的答案，我只是想从用户体验的角度贡献一些东西。表单中的键盘控件非常很重要。

问题是如何在按键Enter上禁用提交。而不是如何在整个应用程序中忽略Enter。因此考虑将处理程序附加到表单元素，而不是窗口。

禁用表单提交Enter仍应允许以下操作：

1. 当提交按钮聚焦时，通过Enter提交表单。
2. 填充所有字段时的表单提交。
3. 通过Enter与非提交按钮交互。

这只是样板，但它遵循所有三个条件。

$('form').on('keypress', function(e) {// Register keypress on buttons.$attr = $(e.target).attr('type');$node = e.target.nodeName.toLowerCase();if ($attr === 'button' || $attr === 'submit' || $node === 'textarea') {return true;}
// Ignore keypress if all fields are not populated.if (e.which === 13 && !fieldsArePopulated(this)) {return false;}});

使用javascript（不检查任何输入字段）：

<script>window.addEventListener('keydown', function(e) {if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {e.preventDefault();return false;}}, true);</script>

如果有人想将其应用于特定字段，例如输入类型文本：

<script>window.addEventListener('keydown', function(e) {if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {e.preventDefault();return false;}}}, true);</script>

这在我的情况下工作得很好。

进入您的css并将其添加到其中，然后将自动阻止您的公式的提交，只要您有提交输入，如果您不再需要它，您可以删除它或键入activate和deactivate

 input:disabled {background: gainsboro;}input[value]:disabled {color: whitesmoke;}

您还可以使用javascript:void(0)来防止表单提交。

<form action="javascript:void(0)" method="post"><label for="">Search</label><input type="text"><button type="sybmit">Submit</button></form>

<form action="javascript:void(0)" method="post"><label for="">Search</label><input type="text"><button type="sybmit">Submit</button></form>

这是完美的方式，您将不会从您的页面重定向

$('form input').keydown(function (e) {if (e.keyCode == 13) {e.preventDefault();return false;}});

$(document).on("keydown","form", function(event){node = event.target.nodeName.toLowerCase();type = $(event.target).prop('type').toLowerCase();
if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169)){event.preventDefault();return false;}});

它完美地工作！

这将禁用页面上所有表单的回车键，并且不会阻止在文本区域中输入。

    // disable form submit with enter
$('form input:not([type="submit"])').keydown((e) => {if (e.keyCode === 13) {e.preventDefault();return false;}return true;});

我已经使用此代码来禁用输入类型[文本]和输入类型[密码]上的“ENTER”键，您可以添加其他类似的输入类型[电子邮件]，也可以应用于您想要的输入类型。

$(document).on('keyup keypress', 'form input[type="text"] , input[type="password"]', function(e) {if (e.keyCode == 13) {e.preventDefault();return false;}});

如果使用Vue，请使用以下代码阻止用户通过点击输入提交表单：

<form @submit.prevent>...</form>

如果您使用的是Alpine，您可以使用以下方法通过按输入来防止表单提交：

<div x-data><form x-on:keydown.prevent.enter="">...</form></div>

或者，您可以使用.window修饰符在页面上的根window对象而不是元素上注册事件侦听器。

<form><div x-data><input x-on:keydown.window.prevent.enter="" type="text"></div></form>