Javascript jquery 在输入时禁用表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11235622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery disable form submit on enter
提问by Adam Levitt
I have the following javascript in my page which does not seem to be working.
我的页面中有以下 javascript 似乎不起作用。
$('form').bind("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
I'd like to disable submitting the form on enter, or better yet, to call my ajax form submit. Either solution is acceptable but the code I'm including above does not prevent the form from submitting.
我想禁用在输入时提交表单，或者更好的是，调用我的 ajax 表单提交。任何一种解决方案都是可以接受的，但我上面包含的代码不会阻止表单提交。
回答by zessx
If keyCodeis not caught, catch which:
如果keyCode没有被抓住，抓住which：
$('#formid').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
EDIT: missed it, it's better to use keyupinstead of keypress
编辑：错过了，最好使用keyup而不是keypress
EDIT 2: As in some newer versions of Firefox the form submission is not prevented, it's safer to add the keypress event to the form as well. Also it doesn't work (anymore?) by just binding the event to the form "name" but only to the form id. Therefore I made this more obvious by changing the code example appropriately.
编辑 2：在某些较新版本的 Firefox 中，不会阻止表单提交，将 keypress 事件添加到表单中也更安全。它也不起作用（不再？）仅将事件绑定到表单“名称”但仅绑定到表单 id。因此，我通过适当更改代码示例使这一点更加明显。
EDIT 3: Changed bind()to on()
编辑 3：更改bind()为on()
回答by VisioN
Usually form is submitted on Enterwhen you have focus on input elements.
通常Enter当您关注输入元素时提交表单。
We can disable Enterkey (code 13) on input elements within a form:
我们可以在表单中的输入元素上禁用Enter键（代码13）：
$('form input').on('keypress', function(e) {
return e.which !== 13;
});
回答by user1017926
Even shorter:
更短：
$('myform').submit(function() {
return false;
});
回答by gdoron is supporting Monica
$('form').keyup(function(e) {
return e.which !== 13
});
The event.whichproperty normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
该event.which财产归event.keyCode和event.charCode。建议观看 event.which 进行键盘按键输入。
回答by Buzogany Laszlo
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;
}
});
This solution works on all forms on website (also on forms inserted with ajax), preventing only Enters in input texts. Place it in a document ready function, and forget this problem for a life.
此解决方案适用于网站上的所有表单（也适用于使用 ajax 插入的表单），仅防止输入文本中的 Enter。把它放在一个文档就绪函数中，一辈子忘掉这个问题。
回答by jean-baptiste
Most answers above will prevent users from adding new lines in a textarea field. If this is something you want to avoid, you can exclude this particular case by checking which element currently has focus :
上面的大多数答案都会阻止用户在 textarea 字段中添加新行。如果这是您想要避免的事情，您可以通过检查当前具有焦点的元素来排除这种特殊情况：
var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
e.preventDefault();
return false;
}
回答by Costa
The overkill of having to capture and test every keystroke for the ENTER key really bugs me, so my solution relies on the following browser behavior:
必须为 ENTER 键捕获和测试每个击键的过度杀伤真的让我感到困扰，所以我的解决方案依赖于以下浏览器行为：
Pressing ENTER will trigger a clickevent on the submit button (tested in IE11, Chrome 38, FF 31)** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/)
按 ENTER 将触发提交按钮上的点击事件（在 IE11、Chrome 38、FF 31 中测试）**（参考：http: //mattsnider.com/how-forms-submit-when-pressing-enter/）
So my solution is to remove the standard submit button (i.e. <input type="submit">) so that the above behavior fails because there's no submit button to magically click when ENTER is pressed. Instead, I use a jQuery click handler on a regular button to submit the form via jQuery's .submit()method.
所以我的解决方案是删除标准提交按钮（即<input type="submit">），以便上述行为失败，因为按下 ENTER 时没有提交按钮可以神奇地单击。相反，我在常规按钮上使用 jQuery 单击处理程序通过 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>
Demo: http://codepen.io/anon/pen/fxeyv?editors=101
演示：http: //codepen.io/anon/pen/fxeyv?editors=101
** this behavior is not applicable if the form has only 1 input field and that field is a 'text' input; in this case the form will be submitted upon ENTER key even if no submit button is present in the HTML markup (e.g. a search field). This has been standard browser behavior since the 90s.
** 如果表单只有 1 个输入字段并且该字段是“文本”输入，则此行为不适用；在这种情况下，即使 HTML 标记中没有提交按钮（例如搜索字段），表单也会通过 ENTER 键提交。自 90 年代以来，这一直是标准的浏览器行为。
回答by Perica Zivkovic
if you just want to disable submit on enter and submit button too use form's onsubmit event
如果您只想在输入和提交按钮时禁用提交，请使用表单的 onsubmit 事件
<form onsubmit="return false;">
You can replace "return false" with call to JS function that will do whatever needed and also submit the form as a last step.
您可以将“return false”替换为对 JS 函数的调用，该函数将执行任何需要的操作，并将表单作为最后一步提交。
回答by Tarik
You can do this perfectly in pure Javascript, simple and no library required. Here it is my detailed answer for a similar topic: Disabling enter key for form
您可以在纯 Javascript 中完美地做到这一点，简单且不需要库。这是我对类似主题的详细回答： Disabling enter key for form
In short, here is the code:
简而言之，这里是代码：
<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>
This code is to prevent "Enter" key for input type='text' only. (Because the visitor might need to hit enter across the page) If you want to disable "Enter" for other actions as well, you can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs for "e.target.nodeName", "e.target.type"and many more...
此代码仅用于防止输入 type='text' 的“Enter”键。（因为访问者可能需要在整个页面上按回车）如果您还想为其他操作禁用“回车”，您可以添加 console.log(e); 为了您的测试目的，并在 chrome 中点击 F12，转到“控制台”选项卡并点击页面上的“退格”并查看其内部以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上以满足您对"e.target.nodeName"、"e.target.type"等的需求...
回答by Don Marcony Neves
I don't know if you already resolve this problem, or anyone trying to solve this right now but, here is my solution for this!
我不知道您是否已经解决了这个问题，或者现在有人试图解决这个问题，但是，这是我的解决方案！
$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;
}
});
