如何防止按 ENTER 键提交 Web 表单？答案

【问题标题】：How to prevent ENTER keypress to submit a web form?如何防止按 ENTER 键提交 Web 表单？
【发布时间】：2010-10-09 18:45:27
【问题描述】：

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

【问题讨论】：

标签： javascript events

【解决方案1】：

我认为，您可以在 javascript 中的表单上捕获 keydown 并防止冒泡。网页上的ENTER基本上只是提交当前选中控件所在的表单。

【讨论】：

取决于一个控件 tho ;) 在 textarea 中它只是移动到下一行。因此，捕获所有“输入”按键事件并不是一个好主意。
可能，但在那种情况下，表单是否会有 keydown 事件？
您可以直接在所有 input-type-text 和其他类似控件上执行此操作。在大多数情况下，这有点痛苦，不值得打扰，但如果你不得不......

【解决方案2】：

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

<input type="submit" />

浏览器在表单中找到。

因此没有提交按钮，而是类似

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

编辑：回应 cmets 中的讨论：

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

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

我根本不知道不调用 javascript 就无法做到这一点。

【讨论】：

奇怪的是，如果只有一个字段，这在 Firefox 中不起作用。
可访问性很糟糕？可能是。然而，它确实回答了他们的问题，这就是 SO 的用途......也许对答案进行编辑以指出可访问性问题是一个很好的折衷方案？
@bobince - 由于可访问性，这个问题可能值得 -1，但这个问题的准确答案？不要这么想。此外，还有一些您想要执行此操作的有效用例。
你不需要让表单在没有 JavaScript 的情况下无法提交，嗯。如果它有效，但它不会因为浏览器会愉快地提交一个不包含提交按钮的表单。
在所有这些以及带有一个文本输入和一个输入按钮的 Opera 中进行了测试：仍然在 Enter 上提交了表单。您显然需要 JavaScript 来“解决” Enter 问题，但诀窍是做到这一点，同时不要让页面在 JS 不可用的情况下完全无法操作。

【解决方案3】：

你必须调用这个函数，它只会取消表单的默认提交行为。您可以将其附加到任何输入字段或事件。

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();
    }
}

【讨论】：

e 应该是一个参数，然后您应该检查 window.event。此外，您应该从事件中获取密钥代码。最后，你应该返回 false。
你能解释一下在哪里以及如何调用这个函数吗？

【解决方案4】：

[修订版 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;
}

现在您可以在表单上定义按键处理程序：

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

【讨论】：

顺便说一句：您可以在 checkEnter 函数中添加对输入类型的检查（通过事件源）以排除文本区域。
有效。我将此添加到单个输入中，因为我想避免提交表单。它有一个执行内部搜索的按钮，它实际上提高了可用性。
这种方法的一个问题（将这个函数与整个表单上的事件处理程序一起使用）是它还可以防止输入发生在表单中的文本区域中（其中输入是通常是可取的）。
@LonnieBest：感谢您的关注。您确实阅读了我对此答案的评论（见上文），对吗？无论如何，我修改了这个相当老的答案。
@Jonathan：您可以将处理程序附加到单个输入字段或包含输入字段集合（但不是按钮）的某个 div，而不是整个表单。

【解决方案5】：

只需从 onsubmit 处理程序返回 false

<form onsubmit="return false;">

或者如果你想在中间有一个处理程序

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

【讨论】：

这似乎是最简单的答案。我在谷歌浏览器上试过，效果很好。您是否在每个浏览器中都对此进行了测试？
如果您希望通过按submit 按钮提交表单，这不是一个好主意
不起作用，因为提交按钮不再提交表单
@Paul，这是如何获得 38 票的？阻止<form> 提交根本就是把婴儿和洗澡水一起扔出去。
@Pacerier 在 SPA 的上下文中，您几乎总是希望手动处理表单提交。在这种情况下，总是停止浏览器提交表单（并刷新页面，这会重新启动应用程序）是合理的。

【解决方案6】：

这是一个 jQuery 处理程序，可用于停止输入提交，也可以停止退格键 -> 返回。 “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;
 });
});

【讨论】：

以最简单的方式： $("#myinput").keydown(function (e) { if(e.which == 13) e.preventDefault(); });关键是要同时使用“keydown”和 event.preventDefault()。它不适用于“keyup”。
与其他解决方案相比，这具有以下优势：仅阻止键 13 浏览器的自动建议将继续正常工作。
您在每次击键时都访问 keyStop 数组：不好。我会写 if(event.which in keyStop)... 而不是访问未定义的属性或更好：添加这样的第一行： if(event.which in keyStop === false) return;

【解决方案7】：

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。

【讨论】：

我喜欢这个版本，因为它比@hash 的版本更具可读性。但是有一个问题，您应该在“if(keycode == 13)”块中返回 false。正如您所拥有的，此功能可防止该字段中的任何键盘输入。 @hash 的版本还包括 e.keyCode、e.which 和 e.charCode……不确定 e.charCode 是否重要，但我还是把它放在那里：“var keycode = eve.keyCode || eve.which || eve.charCode;".
谢谢，杰克。我编辑了答案以检查charCode。我还在 if 块中移动了 return false。很好的收获。

【解决方案8】：

在我的例子中，这个 jQuery JavaScript 解决了这个问题

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

【讨论】：

太棒了，谢谢@Kirby！由于现在在表单中禁用了 enter 键，那么您如何为表单中的所有 <input> 字段启用 enter 键？

【解决方案9】：

怎么样：

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

【讨论】：

【解决方案10】：

此链接提供的解决方案适用于我在 Chrome、FF 和 IE9 以及 IE9 开发工具 (F12) 附带的 IE7 和 8 模拟器。

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

【讨论】：

如果链接损坏，请将此代码添加到页面的标题区域。 <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>

【解决方案11】：

//Turn off submit on "Enter" key

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

【讨论】：

这很好用。 e.preventDefault() 而不是 return false 将达到相同的目的，但允许事件到达父元素中的处理程序。仍然会阻止默认操作（表单汇总）

【解决方案12】：

阻止“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;
              }
           });
         });

谢谢。

【讨论】：

【解决方案13】：

另一种方法是仅在应该提交时将提交输入按钮附加到表单，并在填写表单时将其替换为简单的 div

【讨论】：

【解决方案14】：

只需将此属性添加到您的 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

}

【讨论】：

【解决方案15】：

将此标签添加到您的表单 - onsubmit="return false;" 然后你只能用一些 JavaScript 函数提交你的表单。

【讨论】：

OP（就像大多数被此浏览器功能所困扰的人一样）可能仍希望允许通过鼠标单击提交，这种（不幸的是，经常推荐）方法也会禁用。没有很好的方法来解决这个问题，但是例如上面的答案（目前）来自亚当，做得更好。

【解决方案16】：

我花了一些时间为 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;
            }
        }
    }
}

【讨论】：

【解决方案17】：

我在此主题、此处或其他帖子中找到的所有答案都有一个缺点，那就是它也阻止了表单元素上的实际更改触发器。因此，如果您运行这些解决方案，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");
        }
    });
});

【讨论】：

【解决方案18】：

放入javascript外部文件

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

或body标签内的某处

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

【讨论】：

【解决方案19】：

我遇到了同样的问题（包含大量文本字段和不熟练用户的表单）。

我是这样解决的：

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 的字段中。

【讨论】：

【解决方案20】：

这对我有用。
onkeydown="return !(event.keyCode==13)"

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

   </form>

【讨论】：

如果你有textarea，你不能跳到下一行输入同一个表单

【解决方案21】：

请查看这篇文章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>

【讨论】：

【解决方案22】：

在纯 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>

这只会禁用 input type='text' 的“Enter”按键操作。访问者仍然可以在整个网站上使用“Enter”键。

如果您还想禁用其他操作的“Enter”，您可以添加 console.log(e);出于您的测试目的，并在 chrome 中按 F12，转到“控制台”选项卡并在页面上按“退格键”并查看其内部以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上以满足您对 "e.target.nodeName"、"e.target.type" 和还有很多...

See my detailed answer for a similar question here

【讨论】：

其实应该是e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'。使用指定的代码，如果选中单选框或复选框，它将允许提交表单。
这是最有效和资源友好的解决方案。感谢@AlexandrePires！这是我的完整工作脚本：stackoverflow.com/a/40686327/1589669
唯一可行的解决方案；至少在我的情况下。

【解决方案23】：

要防止在textarea 或input 字段中按enter 时提交表单，请检查提交事件以查找发送事件的元素类型。

示例 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();
    }
});

更好的解决方案是，如果您没有提交按钮并使用普通按钮触发事件。这更好，因为在第一个示例中触发了 2 个提交事件，但在第二个示例中仅触发了 1 个提交事件。

示例 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();
    }
});

【讨论】：

此解决方案在 Safari（至少我测试的版本）中不起作用，因为出于某种原因 Safari 不认为 activeElement 被提交，即使您单击它也是如此。因此，在 Safari 上，它会阻止表单被提交。

【解决方案24】：

过去，我总是使用上述按键处理程序来完成此操作，但今天找到了一个更简单的解决方案。回车键只是触发表单上第一个未禁用的提交按钮，所以实际上所需要的只是拦截试图提交的按钮：

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

就是这样。按键将由浏览器/字段/等照常处理。如果触发了输入-提交逻辑，则浏览器将找到隐藏的提交按钮并触发它。然后 javascript 处理程序将阻止提交。

【讨论】：

平时我不喜欢hack，但是这个真的很有效。
删除 div 并将 attr hidden 放在输入上会更短。不错的技巧:)

【解决方案25】：

你会发现这更简单有用: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;
    } 
});

【讨论】：

【解决方案26】：

我自己也遇到过这个问题，因为我有多个具有不同“名称”值的提交按钮，因此提交时它们在同一个 php 文件上执行不同的操作。 enter / return 按钮打破了这一点，因为这些值没有提交。所以我在想，enter / return 按钮会激活表单中的第一个提交按钮吗？这样，您可以拥有一个隐藏的“香草”提交按钮，或者具有将执行的 php 文件返回到其中包含表单的页面的“名称”值。或者，按键激活的默认（隐藏）“名称”值，并且提交按钮用它们自己的“名称”值覆盖。只是一个想法。

【讨论】：

【解决方案27】：

怎么样：

<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>

只需正确命名您的按钮，它仍会提交，但文本字段，即当您按回车键时的显式原始目标，将没有正确的名称。

【讨论】：

【解决方案28】：

我会这样做：

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter" && event.target.tagName !== 'TEXTAREA')
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
});

【讨论】：

这会破坏 textarea -> 你将无法输入新行
@Liero 我已经修改了我的答案，将<textarea> 排除在外。
如果有按钮怎么办，例如在引导程序的输入组或第三方控件中？它应该与输入一起使用。我想说的是，取消 KeyPress 事件不是个好主意
@Liero 好吧，这个问题没有提到任何需要容纳 3rd 方控件。本质只是阻止enter 提交表单。你认为最合适的方法是什么？如果可用，我认为最好的方法是如果<form> 元素具有一个属性来防止所有子元素上的这种默认行为，同时还具有在每个子元素上设置一个属性以覆盖表单级别的粒度如果需要，属性。我不知道这些属性是否存在。你认为什么是最好的？
是提交按钮导致提交时进入。当用户按下回车键时，浏览器会触发按钮上的点击事件。因此，您可以捕获点击事件并取消它，而不是取消按键。

【解决方案29】：

如果这些答案都不适合你，试试这个。在实际提交表单的按钮之前添加一个提交按钮，并且对事件不执行任何操作。

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 (⌐■_■)");
    }
});

【讨论】：