如何防止按键提交网页表单？

如何防止在基于Web的应用程序中按ENTER键提交表单？

Answer 1

[ 修订版 2012，没有内联处理程序，保留textarea进入处理]

function checkEnter(e){ e = e || event; var txtArea = /textarea/i.test((e.target || e.srcElement).tagName); return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13; } 

现在你可以在表单上定义一个按键处理程序：
<form> onkeypress =“return checkEnter（event）”>

 document.querySelector('form').onkeypress = checkEnter; 

Answer 2

这里是一个jQuery处理程序，可以用来停止input提交，也停止退格键 – >返回。 “keyStop”对象中的（keyCode：selectorString）对用于匹配不应该触发其默认操作的节点。

请记住，networking应该是一个可访问的地方，这是打破键盘用户的期望。 这就是说，在我的情况下，我正在使用的Web应用程序不喜欢后退button，所以禁用其“快捷键是OK”。 “应该进入 – >提交”的讨论是重要的，但与实际提出的问题无关。

这里是代码，由你来考虑可访问性，为什么你真的想要这样做！

 $(function(){ var keyStop = { 8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back 13: "input:text, input:password", // stop enter = submit end: null }; $(document).bind("keydown", function(event){ var selector = keyStop[event.which]; if(selector !== undefined && $(event.target).is(selector)) { event.preventDefault(); //stop event } return true; }); }); 

Answer 3

只需从onsubmit处理程序返回false

 <form onsubmit="return false;"> 

或者如果你想在中间的处理程序

 <script> var submitHandler = function() { // do stuff return false; } </script> <form onsubmit="return submitHandler()"> 

Answer 4

 //Turn off submit on "Enter" key $("form").bind("keypress", function (e) { if (e.keyCode == 13) { $("#btnSearch").attr('value'); //add more buttons here return false; } }); 

Answer 5

你将不得不调用这个函数来取消表单的默认提交行为。 您可以将其附加到任何input字段或事件。

 function doNothing() { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if( keyCode == 13 ) { if(!e) var e = window.event; e.cancelBubble = true; e.returnValue = false; if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } } 

Answer 6

ENTER键仅激活表单的默认提交button，这将是第一个

 <input type="submit" /> 

浏览器在窗体内find。

因此，没有提交button，但类似的东西

 <input type="button" value="Submit" onclick="submitform()" /> 

---

编辑 ：在回应评论中的讨论：

如果只有一个文本字段，这不起作用 – 但在这种情况下可能是所需的行为。

另一个问题是，这依靠Javascript来提交表单。 从可访问性的angular度来看，这可能是一个问题。 这可以通过用javascript编写<input type='button'/> ，然后在<noscript>标记中放入一个<input type='submit' /> 。 这种方法的缺点是，对于禁用JavaScript的浏览器，您将在ENTER上提交表单提交。 由OP来决定在这种情况下期望的行为是什么。

我知道没有这样做，而无需调用JavaScript。

Answer 7

我在这个主题，这里或其他post中find的所有答案都有一个缺点，那就是它阻止了表单元素上的实际更改触发器。 所以如果你运行这些解决scheme，onchange事件也不会被触发。 为了克服这个问题，我修改了这些代码，为自己开发了下面的代码。 我希望这对其他人有用。 我给了我的表单“prevent_auto_submit”，并添加了以下JavaScript：

 $(document).ready(function() { $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) { if (event.keyCode == 13) { event.preventDefault(); $(this).trigger("change"); } }); }); 

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=“文本”的“Enter”按键操作。 访问者仍然可以在整个网站上使用“input”键。

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

在这里看到我的详细的答案，类似的问题

Answer 9

 stopSubmitOnEnter (e) { var eve = e || window.event; var keycode = eve.keyCode || eve.which || eve.charCode; if (keycode == 13) { eve.cancelBubble = true; eve.returnValue = false; if (eve.stopPropagation) { eve.stopPropagation(); eve.preventDefault(); } return false; } } 

然后在你的表格上：

 <form id="foo" onkeypress="stopSubmitOnEnter(e);"> 

不过，如果你不使用强大的JavaScript，那会更好。

Answer 10

我花了一些时间为IE8,9,10，Opera 9+，Firefox 23，Safari（PC）和Safari（MAC）制作了这个跨浏览器，

JSFiddle示例： http : //jsfiddle.net/greatbigmassive/ZyeHe/

基本代码 – 通过附加到表单的“onkeypress”调用该函数，并将“window.event”传递给它。

 function stopEnterSubmitting(e) { if (e.keyCode == 13) { var src = e.srcElement || e.target; if (src.tagName.toLowerCase() != "textarea") { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } } } 

Answer 11

就我而言，这个jQuery JavaScript解决了这个问题

 jQuery(function() { jQuery("form.myform").submit(function(event) { event.preventDefault(); return false; }); } 

Answer 12

防止“回车”提交表格可能会给您的一些用户带来不便。 所以如果你按照下面的步骤，会更好一些：

在表单标签中写下“onSubmit”事件：

 <form name="formname" id="formId" onSubmit="return testSubmit()" ...> .... .... .... </form> 

写Javascriptfunction如下：

 function testSubmit(){ if(jQuery("#formId").valid()) { return true; } return false; } (OR) 

什么原因，如果你想防止按Enter键提交表单，你可以在javascript中写入以下函数：

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

谢谢。

Answer 13

将此标记添加到您的表单 – onsubmit="return false;" 那么你只能用一些JavaScript函数提交你的表单。

Answer 14

怎么样：

 <asp:Button ID="button" UseSubmitBehavior="false"/> 

Answer 15

请检查这篇文章如何防止input按键提交网页表单？

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class=”pc_prevent_submit” action=”” method=”post”> <input type=”text” name=”username”> <input type=”password” name=”userpassword”> <input type=”submit” value=”submit”> </form> 

Answer 16

为了防止在按下input textarea或input字段时提交表单，请检查提交事件以查找发送事件的元素types。

例1

HTML

 <button type="submit" form="my-form">Submit</button> <form id="my-form"> ... </form> 

jQuery的

 $(document).on('submit', 'form', function(e) { if (e.delegateTarget.activeElement.type!=="submit") { e.preventDefault(); } }); 

一个更好的解决scheme是，如果你没有提交button，你用普通的button来触发事件。 最好是因为在第一个例子中，提交事件被解雇，而在第二个例子中，只有一个提交事件被解雇。

例2

HTML

 <button type="button" onclick="$('#my-form').submit();">Submit</button> <form id="my-form"> ... </form> 

jQuery的

 $(document).on('submit', 'form', function(e) { if (e.delegateTarget.activeElement.localName!=="button") { e.preventDefault(); } }); 

Answer 17

过去我一直使用类似上面的按键处理程序来完成这项工作，但今天却遇到了一个更简单的解决scheme。 回车键只是触发窗体上的第一个非禁用的提交button，所以实际上所有需要的是拦截试图提交的button：

 <form> <div style="display: none;"> <input type="submit" name="prevent-enter-submit" onclick="return false;"> </div> <!-- rest of your form markup --> </form> 

而已。 按键将像往常一样由浏览器/字段等处理。如果触发了input提交逻辑，则浏览器将find隐藏的提交button并触发它。 然后，javascript处理程序将阻止这个submision。

Answer 18

你会发现这更简单和有用：D

 $(document).on('submit', 'form', function(e){ /* on form submit find the trigger */ if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){ /* if the trigger is not between selectors list, return super false */ e.preventDefault(); return false; } }); 

Answer 19

你可以在javascript中捕捉表单中的keydown，并防止偶然的冒泡，我想。 在网页上input基本上只是提交当前select的控件所在的表单。

Answer 20

这个链接提供了一个在Chrome，FF和IE9中为我工作的解决scheme，以及IE9的开发工具（F12）附带的IE7和8的模拟器。

http://webcheatsheet.com/javascript/disable_enter_key.php

Answer 21

另一种方法是将提交inputbutton附加到表单上，只有在表单填写期间将其replace为简单的div

Answer 22

只需将此属性添加到您的FORM标签：

 onsubmit="return gbCanSubmit;" 

然后，在你的SCRIPT标签中添加：

 var gbCanSubmit = false; 

然后，当你制作一个button或者其他任何原因时（比如在一个函数中），你最终允许一个提交，简单地翻转全局布尔值并且执行一个.submit（）调用，类似于这个例子：

 function submitClick(){ // error handler code goes here and return false if bad data // okay, proceed... gbCanSubmit = true; $('#myform').submit(); // jQuery example } 

Answer 23

这对我有效。
onkeydown =“return！（event.keyCode == 13）”

  <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)"> </form> 

Answer 24

我自己遇到这个，因为我有多个提交button具有不同的“名称”值，以便提交时，他们在同一个PHP文件上做不同的事情。 enter / returnbutton打破这个值，因为这些值没有提交。 所以我在想， enter / returnbutton是否激活表单中的第一个提交button？ 这样，你可以有一个“香草”提交button，这是隐藏的或有一个“名称”值，返回正在执行的PHP文件回到页面的forms。 或者是按键激活的默认（隐藏）“名称”值，提交button用自己的“名称”值覆盖。 只是一个想法。

Answer 25

放到JavaScript的外部文件

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

或身体标签内的某处

 <script> $(document).ready(function() { $(window).keydown(function(event) { alert(1); if(event.keyCode == 13) { return false; } }); }); </script> 

Answer 26

我有同样的问题（forms与吨文本字段和不熟练的用户）。

我以这种方式解决了这个问题：

 function chkSubmit() { if (window.confirm('Do you want to store the data?')) { return true; } else { // some code to focus on a specific field return false; } } 

在HTML代码中使用这个：

 <form action="go.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" onsubmit="return chkSubmit()" > 

这样ENTER键按照计划工作，但需要一个确认（通常是第二个ENTER ）。

如果他决定留在表格上，我会向读者发送一个脚本发送给用户的脚本。