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

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

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

这是一个jQuery处理程序，可以用来停止输入提交，也可以停止退格键-> back。“ keyStop”对象中的（keyCode：选择器字符串）对用于匹配不应触发其默认操作的节点。

请记住，网络应该是可访问的地方，这违反了键盘用户的期望。就是说，就我而言，我正在使用的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;
 });
});

只需从onsubmit处理程序返回false

<form onsubmit="return false;">

或者如果您想在中间使用处理程序

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

//Turn off submit on "Enter" key

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

您将不得不调用此函数，而这只是取消表单的默认提交行为。您可以将其附加到任何输入字段或事件。

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

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

<input type="submit" />

浏览器在表单中找到。

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

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

编辑：针对评论中的讨论：

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

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

我完全不调用javascript就无法做到这一点。

简而言之，用纯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>

这仅对输入type ='text'禁用“ Enter”按键操作。访问者仍然可以在整个网站上使用“ Enter”键。

如果您还想对其他操作禁用“ Enter”，则可以添加console.log（e）;。为了您的测试目的，在chrome中按F12键，转到“控制台”选项卡并在页面上单击“退格键”，然后在其中查看以查看返回的值，然后可以将所有这些参数作为目标以进一步增强代码以上可以满足您对“ e.target.nodeName”，“ e.target.type”等的需求...

在这里查看我的详细答案以获取类似问题

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

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

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

而已。按键操作将由浏览器/ fields / etc等照常处理。如果触发了“输入-提交”逻辑，则浏览器将找到该隐藏的“提交”按钮并将其触发。然后javascript处理程序将阻止该细分。

我花了一些时间来制作适用于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;
            }
        }
    }
}

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会更好。

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

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

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

谢谢。

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

为了防止形式按下时提交enter的textarea或input现场，检查提交事件查找元素的类型发送的事件。

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

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

怎么样：

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

请检查本文如何防止ENTER键提交Web表单？

$(“.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>

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

该链接提供了一个适用于我的解决方案，该解决方案在Chrome，FF和IE9以及IE9的开发人员工具（F12）附带的IE7和8仿真器中均适用。

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

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

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

}

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

怎么样：

<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）将没有正确的名称。

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

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

   </form>

这是我的处理方式：

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

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

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

我是这样解决的：

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决定保留表格，我将向读者发送脚本，要求用户将其发送到他按下的字段中。