如何防止 ENTER 按键在基于网络的应用程序中提交表单？
答案 0 :(得分：93)
[ 修订 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;
}
现在您可以在表单上定义一个按键处理程序：
＆lt; form [...] onkeypress =“return checkEnter（event）”＆gt;
document.querySelector('form').onkeypress = checkEnter;
答案 1 :(得分：55)
这是一个jQuery处理程序，可用于停止输入提交，还可以停止退格键 - ＆gt;背部。 “keyStop”对象中的（keyCode：selectorString）对用于匹配不应触发其默认操作的节点。
请记住，网络应该是一个可访问的地方，这打破了键盘用户的期望。也就是说，在我的情况下，我正在处理的Web应用程序无论如何都不喜欢后退按钮，因此禁用其关键快捷键就可以了。 “应该输入 - >提交”讨论很重要，但与实际问题无关。
以下是代码，由您来考虑可访问性以及您实际想要执行此操作的原因！
$(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;
});
});
答案 2 :(得分：44)
只需从onsubmit处理程序
返回false<form onsubmit="return false;">
或者如果你想在中间处理一个处理程序
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
答案 3 :(得分：43)
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
答案 4 :(得分：24)
您必须调用此函数，它才会取消表单的默认提交行为。您可以将其附加到任何输入字段或事件。
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();
}
}
答案 5 :(得分：16)
ENTER键仅激活表单的默认提交按钮，这将是第一个
<input type="submit" />
浏览器在表单中找到。
因此，没有提交按钮，但
之类的东西<input type="button" value="Submit" onclick="submitform()" />
编辑：回应评论中的讨论：
如果您只有一个文本字段，则不起作用 - 但在这种情况下，这可能是所需的行为。
另一个问题是，这依赖于Javascript来提交表单。从可访问性的观点来看，这可能是一个问题。这可以通过使用javascript编写<input type='button'/>，然后将<input type='submit' />放在<noscript>标记中来解决。这种方法的缺点是，对于禁用javascript的浏览器，您将在ENTER上提交表单。在这种情况下，由OP决定什么是期望的行为。
我知道在没有调用javascript的情况下无法做到这一点。
答案 6 :(得分：12)
简单回答纯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>
这只会禁用＆＃34;输入＆＃34;输入类型的按键操作=＆＃39; text＆＃39;。访客仍然可以使用＆＃34; Enter＆＃34;关键遍布整个网站。
如果你想禁用＆＃34;输入＆＃34;对于其他操作，您可以添加console.log（e）;为了您的测试目的，并在Chrome中点击F12，转到＆＃34; console＆＃34; tab＆hit＆＃34; backspace＆＃34;在页面上查看内部以查看返回的值，然后您可以定位所有这些参数以进一步增强上面的代码，以满足您对 ＆＃34; e.target.nodeName＆＃34的需求; ， ＆＃34; e.target.type＆＃34; 以及更多......
答案 7 :(得分：9)
我在这个主题，这里或其他帖子中找到的所有答案都有一个缺点，那就是它也阻止了表单元素上的实际更改触发器。因此，如果您运行这些解决方案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");
}
});
});
答案 8 :(得分：5)
我过去总是使用像上面这样的按键处理程序来完成它，但是今天我找到了一个更简单的解决方案。回车键只是触发表单上的第一个非禁用提交按钮，所以实际上所需要的只是拦截尝试提交的按钮：
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
就是这样。 Keypresses将像往常一样由浏览器/字段/等处理。如果触发了enter-submit逻辑，则浏览器将找到隐藏的提交按钮并触发它。然后javascript处理程序将阻止submision。
答案 9 :(得分：5)
我花了一些时间为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;
}
}
}
}
答案 10 :(得分：4)
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会更好。
答案 11 :(得分：3)
将此标记添加到表单 - onsubmit="return false;"
然后，您只能使用一些JavaScript函数提交表单。
答案 12 :(得分：3)
你会发现这更简单实用：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;
}
});
答案 13 :(得分：3)
要在textarea或input字段中按输入时阻止表单提交，请检查提交事件以查找发送事件的元素类型。
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
更好的解决方案是，如果您没有提交按钮，并使用普通按钮触发事件。这样更好，因为在第一个例子中，2个提交事件被触发，但在第二个例子中只触发了1个提交事件。
<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
答案 14 :(得分：3)
阻止“ENTER”提交表单可能会给您的某些用户带来不便。因此，如果您按照以下步骤操作会更好：
在表单标记中写下'onSubmit'事件：
<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
....
....
....
</form>
编写Javascript函数如下：
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;
}
});
});
感谢。
答案 15 :(得分：3)
就我而言，这个jQuery JavaScript解决了这个问题
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
答案 16 :(得分：2)
请查看此文章How to prevent ENTER keypress to submit a web form?
$(“.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>
答案 17 :(得分：2)
怎么样：
<asp:Button ID="button" UseSubmitBehavior="false"/>
答案 18 :(得分：1)
我认为你可以在javascript中捕获表单上的keydown并防止冒泡。在网页上输入基本上只是提交当前所选控件所在的表单。
答案 19 :(得分：1)
只需将此属性添加到您的FORM标记：
onsubmit="return gbCanSubmit;"
然后，在您的SCRIPT标签中，添加以下内容：
var gbCanSubmit = false;
然后，当你创建一个按钮或任何其他原因（比如在函数中）你最终允许提交时，只需翻转全局布尔值并执行.submit（）调用，类似于这个例子：
function submitClick(){
// error handler code goes here and return false if bad data
// okay, proceed...
gbCanSubmit = true;
$('#myform').submit(); // jQuery example
}
答案 20 :(得分：1)
另一种方法是将提交输入按钮仅在应该被提交时附加到表单，并在表单填写期间用简单的div替换它
答案 21 :(得分：1)
此链接提供了一个解决方案，适用于Chrome，FF和IE9以及IE9开发人员工具（F12）附带的IE7和8仿真器。
答案 22 :(得分：1)
我自己遇到过这个问题，因为我有多个提交按钮，这些按钮具有不同的“名称”值，因此在提交时它们会在同一个php文件上执行不同的操作。由于未提交这些值，enter / return按钮会将其分开。
所以我在想，enter / return按钮是否会激活表单中的第一个提交按钮？
这样你就可以拥有一个'vanilla'提交按钮，该按钮可以隐藏，也可以有一个'name'值，将执行的php文件返回到包含表单的页面。
或者是按键激活的默认（隐藏）'name'值，并且提交按钮用自己的'name'值覆盖。
只是一个想法。
答案 23 :(得分：1)
怎么样：
<script>
function isok(e) {
var name = e.explicitOriginalTarget.name;
if (name == "button") {
return true
}
return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>
只需将您的按钮命名为正确，它仍会提交，但是文本字段，即当您在一个按钮中返回时，explicitOriginalTarget将没有正确的名称。
答案 24 :(得分：0)
这对我有用。
onkeydown =“return！（event.keyCode == 13）”
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>
答案 25 :(得分：0)
这就是我要做的：
window.addEventListener('keydown', function(event)
{
if (event.key === "Enter")
{
if(event.target.type !== 'submit')
{
event.preventDefault();
return false;
}
}
}
答案 26 :(得分：0)
如果这些答案都不对您有用，请尝试此操作。在实际提交表单的按钮之前添加一个提交按钮，而对该事件不执行任何操作。
HTML
<!-- The following button is meant to do nothing. This button will catch the "enter" key press and stop it's propagation. -->
<button type="submit" id="EnterKeyIntercepter" style="cursor: auto; outline: transparent;"></button>
JavaScript
$('#EnterKeyIntercepter').click((event) => {
event.preventDefault(); //The buck stops here.
/*If you don't know what this if statement does, just delete it.*/
if (process.env.NODE_ENV !== 'production') {
console.log("The enter key was pressed and captured by the mighty Enter Key Inceptor (⌐■_■)");
}
});
答案 27 :(得分：-1)
放入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>
答案 28 :(得分：-2)
我遇到了同样的问题（包含大量文本字段和不熟练用户的表单）。
我用这种方式解决了它：
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次点击。）
我向读者留下了一个脚本，要求用户在他按下ENTER的字段中发送用户，如果他决定留在表格上。