如何禁用表单提交当在输入框里按下回车键？

Question

更新：我正在通过Javascript构建表单，因此在页面加载时没有表单。

我有一个带有id="input"的输入字段，每当按下enter键时，表单就会被提交。所以我尝试像这样处理它。

$("#input").keydown(function (e) {
    if (e.keyCode == 13) {
        alert("enter pressed");
        return false;
    }
});

然而，这并不起作用，没有警报，表单仍然被发送。我该如何解决？

- user7933742

---

我认为你指的是submit事件。 - funcoding

@funcoding 是的，完全正确。 - user7933742

所以请将您的代码更改为使用“submit”事件，而不是“keydown”事件。 - funcoding

对于许多用户来说，在文本输入框内按回车键提交表单是预期的行为。由于标准文本输入框不允许字符换行，因此我想知道为什么有人在这些输入框中按回车键？ - scottohara

@scottohara 对，它们不应该这样，但我想编写一个函数来防止这种情况发生。 - user7933742

Answer 1

使用preventDefault()来阻止表单提交。

$("#input").keydown(function (e) {
  if (e.keyCode == 13) {
    alert("enter pressed");
    e.preventDefault();
  }
});

一个带表单的示例：

$('form').submit(function(e){
  e.preventDefault();
});

https://jsfiddle.net/aya6ockv/

- JJJ

Answer 2

在您的输入框中使用onkeypress属性，如下所示：

<input type="text" onkeypress="myFunction(event)">
<script>
function myFunction(event) {
    var x = event.which || event.keyCode;
    if(x == 13) {
        alert("enter pressed");
        return false;
    }
}
</script>

- Raghavendra Rao

---

我收到了警告信息，但是 return false 没有阻止表单被提交。 - user7933742

Answer 3

刚刚创建了一个 JSFiddle，展示它是如何工作的。来看看吧。

$('#input').keydown(function (e) {
  if (e.keyCode == 13) {
    alert('alert pressed');
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <input text="name" id="input">
  <button type="submit">Submit</button>
</form>

- Yangshun Tay

---

这个代码需要放在 document.ready 函数里面吗？还是可以作为一个独立的函数存在？ - user7933742

我不明白为什么这对我不起作用，可能是因为我的表单是通过Javascript构建而不是在页面加载时构建的。 - user7933742

即使表单是通过Javascript构建的，也可以吗？ - user7933742

Answer 4

我会这样做，并将'form'更改为#input。除非您想要停止整个站点的提交，否则这样应该可以很好地工作。

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

- Mr. CatNaps

Answer 5

使用return false比e.preventDefault()更高效。请参考event.preventDefault() vs. return false

$("#input").keydown(function (e) {
    if (e.which == 13) {
        alert("enter pressed");
        return false;
    }
});

- samnu pel

---

如果您正在使用，可以可靠地使用“which”。我刚刚更新了我的答案。我建议使用“keypress”而不是“keydown”。 - samnu pel