Javascript 如何防止ENTER键提交web表单？

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

我认为，可以在javascript中捕获表单上的向下键，甚至防止冒泡。在网页上输入基本上只是提交当前所选控件所在的表单。

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

<input type="submit" />

浏览器将在表单中找到

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

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

---

编辑：回应评论中的讨论：

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

另一个问题是，这依赖于Javascript来提交表单。从可访问性的角度来看，这可能是一个问题。这可以通过使用javascript编写

来解决，然后将

放在

标记中。这种方法的缺点是，对于禁用javascript的浏览器，您将在ENTER上提交表单。在这种情况下，由OP决定所需的行为

---

如果不调用javascript，我知道没有任何方法可以做到这一点。

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

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

[修订版2012，无内联处理程序，保留文本区域输入处理]

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

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

---

只需从onsubmit处理程序返回false

<form onsubmit="return false;">

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

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

var submitHandler=函数（）{
//做事
返回false；
}

这里有一个jQuery处理程序，可以用来停止enter提交，也可以停止backspace键->后退。“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;
 });
});

然后在你的表格上：

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

---

不过，如果您不使用突兀的JavaScript会更好。

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

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

那么：

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

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

---

此链接提供了一个在Chrome、FF和IE9以及IE9开发工具（F12）附带的IE7和IE8仿真器中适用的解决方案

阻止“输入”提交表单可能会给某些用户带来不便。因此，如果您按照以下步骤操作会更好：

在表单标记中写入“onSubmit”事件：

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

无论是什么原因，如果要阻止按Enter键提交表单，可以使用javascript编写以下函数：

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

---

谢谢。

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

只需将此属性添加到表单标签中：

onsubmit="return gbCanSubmit;"

然后，在脚本标记中添加以下内容：

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

}

---

将此标记添加到表单-

onsubmit=“return false；”

---

然后，您只能使用一些JavaScript功能提交表单。

我花了一些时间为IE8、9、10、Opera 9+、Firefox 23、Safari（PC）和Safari（MAC）制作这种跨浏览器

JSFiddle示例：

基本代码-通过表单附带的“onkeypress”调用此函数，并将“window.event”传递给它

---

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

---

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

$（文档）.ready（函数（）{
$（窗口）.keydown（函数（事件）{
警报（1）；
如果（event.keyCode==13）{
返回false；
}
});
});

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

我是这样解决的：

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

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

---

请查看本文

$（“.pc\u prevent\u submit”）.ready（函数（）{
$（窗口）.keydown（函数（事件）{
如果（event.keyCode==13）{
event.preventDefault（）；
返回false；
}
});
});
在纯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>


window.addEventListener（'keydown'，函数（e）{
如果（e.keyIdentifier=='U+000A'| | e.keyIdentifier=='Enter'| | e.keyCode==13）{
if（e.target.nodeName='INPUT'&&e.target.type=='text'）{
e、 预防默认值（）；
返回false；
}
}
}，对）；

这个
<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;
    }
}

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

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

   </form>

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

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

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

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

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

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

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

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

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