通过点击Enter阻止用户提交表单

我在一个网站上有一个调查，似乎有一些问题与用户点击进入（我不知道为什么），并意外提交调查（表单），而不点击提交button。 有没有办法来防止这一点？

我在调查中使用HTML，PHP 5.2.9和jQuery。

Answer 1

您可以使用诸如

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

在阅读关于原帖的评论时，为了使其更加可用，并允许人们在完成所有字段后按Enter键 ：

 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; } }); }); 

Answer 2

禁止在任何地方input密钥

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

 <form ... onkeypress="return event.keyCode != 13;"> 

或者用jQuery：

 $(document).on("keypress", "form", function(event) { return event.keyCode != 13; }); 

这将导致表单中的每个按键都将在keyCode上进行检查。 如果它不是13（Enter键），那么它将返回true，任何事情都会如预期的那样发生。 如果是13（回车键），那么它将返回false，任何东西都会立即停止，所以表单将不会被提交。

keypress事件比keydown更keydown因为只有在实际插入字符时才会触发该事件。 当任何按键被按下时（包括控制键）， keydown （和keyup ）都会被触发。 而且， keypress的keyCode表示正在插入的实际字符，而不是所使用的物理键。 这样你就不需要明确地检查Numpad Enter键（108）是否被按下了。 keyup表单提交已经太晚了，无法阻止表单提交。

请注意$(window)build议在其他答案而不是$(document)不适用于IE <= 8的keydown / keypress / keyup ，所以这不是一个好的select，如果你想覆盖那些不好的用户以及。

只允许在textareas上input密钥

如果你的表单中有一个<textarea> （这当然应该接受回车键），那么将keypress处理程序添加到不是<textarea>每个单独的input元素。

 <input ... onkeypress="return event.keyCode != 13;"> <select ... onkeypress="return event.keyCode != 13;"> ... 

为了减less样板，最好用jQuery来完成：

 $(document).on("keypress", ":input:not(textarea)", function(event) { return event.keyCode != 13; }); 

如果在这些input元素上附加了其他的事件处理函数，那么您也需要在某些原因上input键，那么只能防止事件的默认行为，而不是返回false，以便能正确传播给其他处理程序。

 $(document).on("keypress", ":input:not(textarea)", function(event) { if (event.keyCode == 13) { event.preventDefault(); } }); 

允许在textareas上input密钥并仅提交button

如果你想允许按下提交button<input|button type="submit"> ，那么你总是可以细化select器如下。

 $(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) { // ... }); 

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

Answer 3

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

  var preventSubmit = function(event) { if(event.keyCode == 13) { 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(); } }); 

Answer 4

如果您使用脚本来执行实际的提交，那么您可以将“return false”行添加到onsubmit处理程序，如下所示：

 <form onsubmit="return false;"> 

从JavaScript调用submit（）将不会触发事件。

Answer 5

使用：

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

此解决scheme适用于网站上的所有表单（也包含使用Ajax插入的表单），只在input文本中防止input。 把它放在一个文件准备好的function，忘记这个问题的生活。

Answer 6

而不是阻止用户按回车 ，这可能看起来不自然，你可以保持原样，并添加一些额外的客户端validation：当调查没有完成，结果不会发送到服务器，用户得到一个不错的消息告诉需要完成的表格。 如果您使用jQuery，请尝试validation插件：

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

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

Answer 7

我不能commet，所以我会发布一个新的答案

接受的答案是好的，但它并没有停止提交数字键盘input。 至less在当前版本的Chrome中。 我不得不改变这个键码的条件，然后它的工作。

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

Answer 8

一个不错的简单的小jQuery解决scheme：

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

Answer 9

给表单一个“javascript：void（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> 

Answer 10

我只需要防止提交特定的input，所以我使用了一个类select器，让它成为我所需要的“全局”特性。

 <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()方法。

我是选课人员的忠实粉丝，对所有的利弊和performance进行讨论。 我的命名约定是'idSomething'来表明jQuery使用它作为一个id，从CSS样式分离它。

Answer 11

您可以使用JavaScript方法检查Enter键是否被击中，如果是，则停止提交。

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

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

Answer 12

我有一个类似的问题，我有一个“ajax textfields”（Yii CGridView）和一个提交button的网格。 每次我在一个文本字段上进行search，然后点击input提交的表单。 我不得不做一些button，因为它是视图之间唯一的常用button（MVC模式）。 我所要做的就是删除type="submit"并把onclick="document.forms[0].submit()

Answer 13

我认为它已经覆盖了所有的答案，但是如果你正在使用带有一些JavaScriptvalidation代码的button，你可以设置表单的onkeypress作为回车来调用你的提交如期：

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

JS的onkeypress可以是你需要做的任何事情。 没有必要进行更大规模的全球变革。 如果您不是从头开始编写应用程序的人，那么这种情况尤其如此，并且您已经被引入修复其他人的网站，而不会将其拆分并重新testing。

Answer 14

一个完全不同的方法：

1. 按下Enter键 ，表格中的第一个<button type="submit">将被激活。
2. 即使该button被隐藏， style="display:none;
3. 该button的脚本可以返回false ，从而中止提交过程。
4. 你仍然可以有另一个<button type=submit>来提交表单。 只要返回到级联提交。
5. 在真正的提交button被聚焦时按Enter键将激活实际的提交button。
6. 按<textarea> Enter <textarea>里面的<textarea>或其他窗体控件将performance正常。
7. 按下<input>表单控件中的Enter将触发第一个<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> 

Answer 15

达到目标是我的解决scheme，干净有效。

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

Answer 16

1. 不要使用type =“submit”作为input或button。
2. 使用type =“button”并使用js [jquery / angular / etc]将表单提交给服务器。

Answer 17

在我的具体情况下，我不得不提交表单，并模拟点击提交button。 这是因为提交button上有一个点击处理程序，因为我们在一个模式窗口（inheritance旧代码）。 无论如何，这里是我的这个案例的组合解决scheme。

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

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

Answer 18

这对我有用

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

Answer 19

一个简单而优雅的方法是：

创build一个validate函数，返回true或false（使用你的业务逻辑），并将这段代码添加到脚本中：

 $(function() { $('your form selector').submit(function() { return validate(); }); }); 

Answer 20

在其他解决scheme受挫之后，这在所有浏览器中都适用。 name_space外部函数只是为了远离声明全局variables，我也build议。

 $(function() {window.name_space = new name_space();}); //jquery doc ready function 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!');} ); }); 

Answer 21

在这里我还没有看到回答：当你浏览页面上的元素时，当你到达提交button时，按下Enter键将触发表单上的onsubmit处理程序，但是它会将事件logging为MouseEvent。 这里是我简要的解决scheme来覆盖大多数基地：

这不是一个jQuery相关的答案

HTML

 <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(); } 

find一个工作的例子： https ： //jsfiddle.net/nemesarial/6rhogva2/

Answer 22

我想添加一个小小的CoffeeScript代码（未经过现场testing）：

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

（我希望你喜欢在除外条款中的好戏。）

Answer 23

使用：

 // 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> 

Answer 24

不要把提交button可以做。 只要将脚本放入input（type = button）或添加eventListener（如果您希望它提交表单中的数据）。

而是使用这个

 <input type="button"> 

比使用这个

 <input type="submit"> 

Answer 25

在我的情况下，我有一个窗体中的几个jQuery UI自动填充字段和textareas，所以我一定要他们接受回车 。 因此，我从表单中删除了type="submit"input，并添加了一个锚点<a href="" id="btn">Ok</a> 。 然后我把它作为一个button，并添加下面的代码：

 $( '#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()成功并提交表单。