jQuery禁止表单在按下回车键时提交

Question

我在页面中有以下 JavaScript 代码，似乎没有起作用。

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

我想禁用按下回车键提交表单，或者更好的解决方案是调用我的Ajax表单提交。这两种解决方案都可以接受，但我上面包含的代码无法阻止表单提交。

- Adam Levitt

---

这里有一个只用HTML的简单解决方案：https://dev59.com/NnNA5IYBdhLWcg3wmfO5#51507806 - SamB

Answer 1

如果没有捕获keyCode，则捕获which:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

编辑：错过了，最好使用 keyup 而不是 keypress

编辑2：由于某些新版本的Firefox无法阻止表单提交，因此更安全的做法是将 keypress 事件添加到表单中。另外，它不能（再次？）通过仅将事件绑定到表单“名称”来工作，而只能绑定到表单 ID。因此，我通过适当更改代码示例来更明显地显示出这一点。

编辑3：将 bind() 更改为 on()

- zessx

---

jQuery将其标准化为e.which，因此您无需测试e.keyCode，但是对于此问题最有可能的原因需要加1。 - Bojangles

需要加上return false;吗？e.preventDefault();已足够。 - chromigo

重要！这个解决方案块在文本框中会打断。 - German Khokhlov

问题在于，如果我在同一个表单中有一个文本框，现在我无法在文本框中添加换行符（以创建新行）。 - Tikky

keyCode === 13 && !$(e.target).is('textarea') - teran

Answer 2

通常情况下，当您在输入元素上聚焦时，按下Enter键会提交表单。

我们可以禁用表单内输入元素上的Enter键（代码13）：

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

演示: http://jsfiddle.net/bnx96/325/

- VisioN

---

iOS上的Go按钮是我在自定义自动完成输入字段上遇到的问题。这个解决了它。 - Dylan Valade

这会防止在同一表单中的textarea中使用回车键。使用$("form input")代替$("form :input")似乎可以解决这个问题。演示：http://jsfiddle.net/bnx96/279/ - shaneparsons

Answer 3

更短:

$('myform').submit(function() {
  return false;
});

- user1017926

---

但这样做会阻止用户点击吗？ - haibuihoang

是的，这将禁用表单提交。 - Tom

由于返回值的事件处理程序已被弃用，您应该使用function(e) {e.preventDefault();}。参考链接：https://dev59.com/smIj5IYBdhLWcg3wpWhx#20045473 - flu

这确实很有效，但它不应该是最佳答案，因为问题仅询问“Enter”键，而不涉及禁用“提交”按钮的表单提交。 - daveslab

一个常见的情况是，您可能希望保留表单提交的形式，但禁用按下“enter”键进行提交。这样做的原因可能是您决定使用jQuery onClick 事件来验证表单，并仍然使用jQuery进行提交。换句话说，有时您只想通过javascript / jQuery提交。尽管您仍然可以在此解决方案中使用AJAX，但它会禁用submit方法的基本功能。 - JRad the Bad

在我的情况下，我希望用户能通过按Enter键仅提交一次表单。我使用了非常类似于这个的方法，但是我设置了一个名为"form_enabled"的变量，在第一次表单提交之后将其设置为false，然后我检查该变量以确定在表单提交时是否返回false。 - John Langford

Answer 4

$('form').keyup(function(e) {
  return e.which !== 13  
});

event.which 属性会将 event.keyCode 和 event.charCode 规范化。建议使用 event.which 监听键盘输入。

which 文档。

- gdoron is supporting Monica

Answer 5

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

这个解决方案适用于网站上的所有表单（包括使用ajax插入的表单），只防止在输入文本中按Enter键。将其放置在文档就绪函数中，就可以忘记这个问题一辈子。

- Buzogany Laszlo

Answer 6

大多数上面的回答都会防止用户在文本区域字段中添加新行。如果这是您想要避免的情况，您可以通过检查当前具有焦点的元素来排除此特定情况：

大多数以上的回答都会防止用户在标签中输入回车键（换行）。如果您不想防止用户输入回车键，可以通过检查当前获得焦点的元素来排除该情况。</p><pre class="guess-JavaScript"><code>var keyCode = e.keyCode || e.which; if (keyCode === 13 && !$(document.activeElement).is('textarea')) { e.preventDefault(); return false; } </code></pre>

- jean-baptiste

Answer 7

如果你只想禁用回车键提交表单和提交按钮，可以使用表单的onsubmit事件

<form onsubmit="return false;">

您可以将"return false"替换为调用JavaScript函数，该函数将执行所需的操作并在最后一步提交表单。

- Perica Zivkovic

---

这将禁用所有表单提交，包括点击提交按钮。 - Nick

不是100％的工作...需要定期提交密钥...最好使用jQuery来防止。 - KingRider

好的备选答案（带有上述警告）是因为...嗯，有时这就是你所需要的。 - emilys

这正是我在某种情况下所需要的，谢谢。 - shababhsiddique

最佳解决方案。它不是hacky，也不需要为每个表单编写额外的脚本。 - Reza Nooralizadeh

Answer 8

Submit

To this:

Submit

Then add event in JS...

<form id="myForm">
   <button type="submit">Submit</button>
</form>

为了

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

然后在js或者jquery中添加：

$("#btnSubmit").click(function () {
    $('#myForm').submit();
});

- Zvi Redler

Answer 9

捕获并测试每个按键是否为回车键的过度使用真的让我很烦恼，所以我的解决方案依赖于以下浏览器行为：按下回车键将在提交按钮上触发click事件（在IE11、Chrome 38、FF 31中测试通过）** （参考：http://mattsnider.com/how-forms-submit-when-pressing-enter/）

因此，我的解决方案是删除标准的提交按钮（即<input type="submit">），这样以上行为将失败，因为没有魔法般的提交按钮可以在按下回车键时自动点击。相反，我使用jQuery click处理程序在常规按钮上，通过jQuery的.submit()方法提交表单。

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

演示: http://codepen.io/anon/pen/fxeyv?editors=101

如果表单只有一个输入字段且该字段是“文本”输入，则不适用此行为; 在这种情况下，即使HTML标记中没有提交按钮（例如搜索字段），按下ENTER键也会提交表单。自90年代以来，这一点已成为标准浏览器行为。

- Costa

---

我添加了一个不可见的输入框来解决“按下回车键将提交表单”的问题，这是由于“表单只有一个文本输入字段”引起的。 - Luo Jiong Hui

Answer 10

您可以通过纯JavaScript轻松完成此操作，无需使用任何库。以下是我对类似主题的详细回答： Disabling enter key for 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>

这段代码是为了仅阻止input type='text'的“Enter”键。 （因为访问者可能需要在页面上按Enter键）如果您还想禁用其他操作的“Enter”键，可以添加console.log（e）;进行测试，并在chrome中按F12，在“控制台”选项卡中单击页面上的“退格”，查看返回的值，然后您可以针对所有这些参数进一步改进上述代码以满足您对“e.target.nodeName”、“e.target.type”等的需求...

- Tarik

---

实际上应该是 e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'。使用指定的代码，如果选中了单选框或复选框，则允许提交表单。 - afnpires