javascript 停止输入/返回键提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10313032/
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
Stop Enter/Return key submitting a form
提问by Martin Bean
I have a table within a form. The table contains some form fields, but there are form fields outside of the table (but still within the form) too.
我有一个表格中的表格。该表包含一些表单域，但也有表外的表单域（但仍在表单内）。
I know that Enter and Return are traditionally used to submit a form via the keyboard, but I want to stop this behaviour for fields within the table. For example, if I focus a field within the table and hit Enter/Return, nothing happens. If I focus a field outside of the table (but still within the form) then for it to submit as normal.
我知道 Enter 和 Return 传统上用于通过键盘提交表单，但我想停止表中字段的这种行为。例如，如果我关注表中的一个字段并按 Enter/Return 键，则什么也不会发生。如果我将焦点放在表格之外（但仍在表格内），则它会正常提交。
I have a jQuery plugin that targets this table. Simplified, this is what I've tried this far:
我有一个针对这个表的 jQuery 插件。简化，这是我到目前为止尝试过的：
base.on('keydown', function(e) {
if (e.keyCode == 13) {
e.stopPropagation();
return false;
}
});
Where baseis the table jQuery object. This is within my plugin's initmethod. However, hitting Enter still submits the form.
base表 jQuery 对象在哪里。这是在我的插件init方法中。但是，按 Enter 键仍会提交表单。
Where am I going wrong?
我哪里错了？
EDIT:Some simplified HTML:
编辑：一些简化的 HTML：
<form method="" action="">
<input type="text" /><!--this should still submit on Enter-->
<table>
<tbody>
<tr>
<td>
<input type="text" /><!--this should NOT submit on Enter-->
</td>
</tr>
</tbody>
</table>
</form>
回答by gdoron is supporting Monica
base.keypress(function(e) {
var code = e.keyCode || e.which;
if(code == 13)
return false;
});
or for only inputs:
或仅用于输入：
$(':input', base).keypress(function(e) {
var code = e.keyCode || e.which;
if(code == 13)
return false;
});
回答by Chris Neale
e.preventDefault()rather than e.stopPropagation(). stopPropagation only stops it bubbling up to higher DOM nodes, it doesn't prevent the default action.
e.preventDefault()而不是e.stopPropagation(). stopPropagation 只会阻止它冒泡到更高的 DOM 节点，它不会阻止默认操作。
回答by Ben Everard
I'm going to guess that a form element will fire the submit event, it doesn't bubble up through the table and on to the form, try this instread:
我猜想表单元素会触发提交事件，它不会通过表格冒泡到表单上，试试这个：
$('input, select, textarea', base).on('keydown', function(e) {
if (e.keyCode == 13) {
return false;
}
});
Note we're also providing context to the selector, so this keyDownwill only occur on elements (modify as required) within your table.
请注意，我们还为选择器提供了上下文，因此这keyDown只会发生在表中的元素（根据需要修改）上。
As gordan said in another comment, return false does both .preventDefault()and .stopPropagation()
作为戈尔丹在另一条评论说，返回false确实都.preventDefault()和.stopPropagation()
回答by Chris K
I found this Q/A trying to sort out a similar situation where I have multiple forms and enter would not do what I wanted. In my specific case, I would dynamically add a new <div id="D1">D1, D2, D3, etc, and each new div has a form that would reload that div from the same php code that created it, only also with a POST.
我发现这个 Q/A 试图解决一个类似的情况，我有多个表单并且输入不会做我想要的。在我的特定情况下，我会动态添加一个新的<div id="D1">D1、D2、D3 等，并且每个新的 div 都有一个表单，可以从创建它的相同 php 代码中重新加载该 div，但也只使用 POST。
Unrelated first problem was I couldn't dynamically create a new function with each div, so I passed the D1, etc, descriptor as an argument to the Javascript function:
不相关的第一个问题是我无法为每个 div 动态创建一个新函数，因此我将 D1 等描述符作为参数传递给 Javascript 函数：
<script type="text/javascript">
function formSubmit ( divid ) {
// post data
event.preventDefault();
$.post( "make-my-form-div.php",
$("#form"+divid).serialize(),
function(data){
$("#"+divid).html(data);
});
return false;
}
</script>
You will see the requisite event.preventDefault();and return false;that works for the answers in this thread. It didn't work for me. If I click the Submit in any one form, that one div would reload with the correct data. Hitting enter would cause default action and reload the entire page, leaving me with only 1 div.
您将看到必要条件event.preventDefault();，return false;这适用于该线程中的答案。它对我不起作用。如果我单击任何一种形式的提交，该 div 将重新加载正确的数据。按回车键会导致默认操作并重新加载整个页面，只剩下 1 个 div。
This Answer worked: I needed a unique ID and NAME for the different forms. Initially, they were <INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');">but once I added unique ID and NAMES, such as "formD1", etc, it all started working correctly.
这个答案有效：对于不同的表单，我需要一个唯一的 ID 和 NAME。最初，它们是，<INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');">但是一旦我添加了唯一的 ID 和名称，例如“formD1”等，它就开始正常工作了。
回答by Riyaz Hameed
This works for me.
这对我有用。
$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; });
回答by Gokul Shinde
Just put below code in your template file or in header of page.
只需将以下代码放在您的模板文件或页面标题中。
<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")) {return false;}
}
document.onkeypress = stopRKey;
</script>
