防止按回车键时提交表单

Question

我有一个表单，其中包含一个禁用的提交按钮。虽然用户无法点击此按钮，但他仍然可以按 Enter 键提交表单。我该如何防止这种情况发生？

- Pieter

---

可能重复：http://stackoverflow.com/search?q=prevent+submit+form+enter，https://dev59.com/SUfRa4cB1Zd3GeqP_8eY，https://dev59.com/NnNA5IYBdhLWcg3wmfO5，https://dev59.com/znI-5IYBdhLWcg3wVWzv这些链接中讨论了如何防止用户在按下回车键时提交表单。 - NibblyPig

Answer 1

如果您想要完全禁用表单提交（但我想知道为什么首先放置了整个<form>元素），那么您需要让其submit事件处理程序返回false。

所以，基本上：

<form onsubmit="return false;">

就像之前的回答所指出的那样，您可以在加载期间使用JavaScript / DOM操作来添加它。

如果您只想禁用Enter键提交表单，则需要让其keydown事件处理程序在事件的key匹配Enter时返回false（这种方法在各种浏览器中兼容，并覆盖了默认的Enter以及数字键盘上的Enter！）。

<form onkeypress="return event.key != 'Enter';">

这会禁用表单中任何 <textarea> 元素中的 Enter 键。如果你有这些元素，并且想要保持它们正常工作，那么你需要从 <form> 删除 onkeydown，并将其复制到所有 <input> 和 <select> 元素上。使用 jQuery 可以帮助实现此目标：

$('input, select').keydown(event => event.key != 'Enter');

另请参阅：

• 防止用户通过按Enter键提交表单

- BalusC

---

直到你将“event”作为参数添加到keypress回调中，最后一行代码才能正常工作。.keypress(function(event){}); - tylik

@tylik：你说得对，我忽略了那部分。答案已经修正。谢谢你的提醒。 - BalusC

最后一个按键函数非常优美。 - L.H

Answer 2

假设有以下HTML代码：

<form id="myForm"> ...

你可以使用JavaScript来实现这个功能：

document.getElementById("myForm").onsubmit = function () {
    return false;
};

- Matt

Answer 3

不要实现两种禁用表单提交的方法，而是将一个事件处理程序添加到表单的onsubmit上，该处理程序将检查按钮的disabled属性：

myForm.onsubmit = function () { 
    if (myForm.mySubmit.disabled) 
        return false;
}

- Andy E

Answer 4

假设你有一个id为“myForm”的表单：

<form id="myForm" action="some_file" method="post">
   ...
</form>
<script type="text/javascript">
    document.getElementById( "myForm").onsubmit = function() {
          return false;
    };
    //or with jQuery: $( '#myForm' ).submit( function() { return false; } );
</script>

- Jacob Relkin

---

如果你在<form>之后放置了<script>，那么你不需要等待onload。例如，如果图像仍在加载，则可能会丢失反提交。 - Matt

嗯，你修改了这个答案多少次啊？我已经数不清了。一开始只是一行代码，然后是@Matt的复制粘贴，接着是window.onload，然后是代码格式化，最后又加上了jQuery。我错过了其他的修改吗？ :) - BalusC

@BalusC，嗯，我从来没有复制粘贴过。只是恰好myForm和我们使用的id相同。 :) - Jacob Relkin

Answer 5

如果您不想编辑表单的onsubmit事件，可以按照以下方法操作。
将此代码添加到文本输入框中:

onKeyPress="return noEnter(event)"

并将以下代码添加到头部：

    function noEnter(e)
    {
        var key;
        // 火狐 vs. ie
        (window.event) ? key = window.event.keyCode : key = e.which;
        (key == 13) ? return false : return true;
    }

使用jQuery更容易实现。

- Dänu

Answer 6

jQuery解决方案：

$(document).ready(function(){
  $('form[name="form"]').keypress( function(evt){
    return !(evt.which==13 && evt.target.type!='textarea');
  });
  $('form[name="form"] input[type="submit"]').attr('tabIndex',-1); // this prevents submit also by spacebar (keyCode==32)
  //$('form[name="form"]').submit(function(){ alert('test'); return false; }); // test
});

- Stano

---

感谢您在SO上发布。下次加入一些解释性文本会更有帮助。只需几行说明代码正在执行的操作。例如，为什么将tabIndex设置为-1可以防止空格键提交。 - Devon_C_Miller

谢谢 Devon，下次我会提供更详细的描述。 - Stano

Answer 7

document.getElementById("myForm").onsubmit = function () {
    return false;
};

这些代码在Chrome和Safari上不起作用。它将表单提交到操作URL。

但是<form onsubmit="return false;">很有用。

- sundowatch