jquery禁用表单提交input

我在我的页面有以下JavaScript似乎并没有工作。

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

我想禁用提交input表单，或者更好的是，打电话给我的Ajax表单提交。 任何一种解决scheme都是可以接受的，但是我上面包含的代码并不妨碍表单提交。

Answer 1

如果keyCode没有被捕获，抓住which ：

 $('#formid').on('keyup keypress', function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 13) { e.preventDefault(); return false; } }); 

编辑：错过了，最好用keyup代替keypress

编辑2：正如在Firefox的一些较新版本的表单提交不被阻止，这是更安全的向表单添加按键事件。 此外，它只是将事件绑定到“名称”的forms，但只对表单ID不起作用（了？）。 因此，通过适当地更改代码示例，我使这一点更加明显。

编辑3：更改bind() on()

Answer 2

当你注重input元素时，通常表单是在回车中提交的。

我们可以在表单中的input元素上禁用回车键（代码13 ）：

 $('form input').on('keypress', function(e) { return e.which !== 13; }); 

DEMO： http : //jsfiddle.net/bnx96/325/

Answer 3

更短：

 $('myform').submit(function() { return false; }); 

Answer 4

 $('form').keyup(function(e) { return e.which !== 13 }); 

event.which属性规范了event.keyCode和event.charCode 。 build议观看键盘input的事件。

which文档。

Answer 5

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

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

Answer 6

不得不捕捉和testing每个击键的ENTER键的矫枉过正真的让我感到困惑，所以我的解决scheme依赖于以下浏览器行为：

按ENTER键会触发提交button上的点击事件（在IE11，Chrome 38，FF 31中testing） **（参考： http : //mattsnider.com/how-forms-submit-when-pressing-enter/ ）

所以我的解决scheme是删除标准的提交button（即<input type="submit"> ），以便上述行为失败，因为没有提交button来奇迹般地按下ENTER键时。 相反，我使用常规button上的jQuery click处理程序通过jQuery的.submit()方法提交表单。

 <form id="myform" method="post"> <input name="fav_color" type="text"> <input name="fav_color_2" type="text"> <button type="button" id="form-button-submit">DO IT!</button> </form> <script> $('#form-button-submit').click(function(){ $('#myform').submit(); }); </script> 

演示： http : //codepen.io/anon/pen/fxeyv?editors=101

**如果表单只有一个input字段，并且该字段是“文本”input，则此行为不适用; 在这种情况下，即使在HTML标记（例如search字段）中没有提交button，也将在ENTER键上提交表格。 这是90年代以来的标准浏览器行为。

Answer 7

我不知道你是否已经解决了这个问题，或者现在有人试图解决这个问题，但是，这是我的解决scheme！

 $j(':input:not(textarea)').keydown(function(event){ var kc = event.witch || event.keyCode; if(kc == 13){ event.preventDefault(); $j(this).closest('form').attr('data-oldaction', function(){ return $(this).attr('action'); }).attr('action', 'javascript:;'); alert('some_text_if_you_want'); $j(this).closest('form').attr('action', function(){ return $(this).attr('data-oldaction'); }); return false; } }); 

Answer 8

你可以在纯Javascript中完成这个工作，简单，不需要任何库。 这里是我对类似主题的详细解答： 禁用表单的回车键

总之，这里是代码：

 <script type="text/javascript"> 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> 

此代码仅用于防止inputtypes=“文本”的“input”键。 （因为访问者可能需要在整个页面中input）如果你想禁用其他操作的“Enter”，你可以添加console.log（e）; 为了您的testing目的，并在Chrome浏览器中按F12键，进入“控制台”选项卡并点击页面上的“退格”，然后查看内容以查看返回的值，然后可以定位所有这些参数以进一步增强代码以上，以满足您的需求“e.target.nodeName” ， “e.target.type”等等…

Answer 9

如果你只是想禁用提交input提交button也使用窗体的onsubmit事件

 <form onsubmit="return false;"> 

你可以用JS函数调用“return false”来完成任何需要的操作，并将表单作为最后一步提交。

Answer 10

上面的大多数答案将阻止用户在textarea字段中添加新行。 如果这是你想要避免的，你可以通过检查哪个元素当前有焦点来排除这个特定情况：

 var keyCode = e.keyCode || e.which; if (keyCode === 13 && !$(document.activeElement).is('textarea')) { e.preventDefault(); return false; } 

Answer 11

下面的代码将取消用于提交表单的回车键，但仍然允许您在textarea中使用回车键。 你可以根据你的需要进一步编辑。

 <script type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) ) {return false;} } document.onkeypress = stopRKey; </script> 

Answer 12

3年后，没有一个人完全回答了这个问题。

提问者想要取消默认的表单提交并调用他们自己的Ajax。 这是一个简单的解决scheme简单的请求。 不需要拦截每个input中input的每个字符。

假设表单有一个提交button，无论是<button id="save-form">还是<input id="save-form" type="submit"> ，请执行以下操作：

 $("#save-form").on("click", function () { $.ajax({ ... }); return false; }); 

Answer 13

在Firefox中，当你在input时按下回车键，它会提交它的上层表单。 解决scheme是在将提交表单添加此：

 <input type="submit" onclick="return false;" style="display:none" /> 

Answer 14

当文件完成时（加载完成），脚本检测每个事件的“Entry”键，并禁用后面的事件。

 <script> $(document).ready(function () { $(window).keydown(function(event){ if(event.keyCode == 13) { e.preventDefault(); // Disable the " Entry " key return false; } }); }); </script> 

Answer 15

所有浏览器的JavaScript完整解决scheme

上面的代码和大部分解决scheme都是完美的。 不过，我觉得最喜欢的一个“简答”是不完整的。

所以这里是整个答案。 在原生支持IE 7的JavaScript中也是如此。

 var form = document.getElementById("testForm"); form.addEventListener("submit",function(e){e.preventDefault(); return false;}); 

此解决scheme现在将阻止用户使用回车键提交，并且不会重新加载页面，或者如果您的表单位于下面某处，则会将您带到页面的顶部。

Answer 16

这个怎么样：

 $(":submit").closest("form").submit(function(){ $(':submit').attr('disabled', 'disabled'); }); 

这应该禁用您的应用程序提交button的所有表单。