jQuery在按下ENTER键时无法提交

Question

一个非常简单的表单和JS：

$('#gg').submit(function() {
    alert('s');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="gg" method="post">
    <input name="languageId" type="text">
    <input name="languageName" type="text">
</form>

在输入框上按下回车键时，.submit不会被触发。但是，如果只有一个输入框，则可以正常工作！

- John Smith

---

为什么应该呢？ - j08691

您需要在form中放置一个<button type="submit" />或<input type="submit" />，以使此行为生效。 - Rory McCrossan

@RoryMcCrossan 哈哈，是的。这是一个非常古老的“特性”。链接即将到来... - j08691

为什么只有一个文本输入的表单会在按下回车键时提交，而有两个或更多文本输入的表单则不会？当一个表单只有一个文本输入时，默认情况下，按下“Enter”键将触发表单的提交。但如果表单中有两个或更多文本输入，则必须明确指定一个输入作为焦点才能触发提交。这是因为当有多个输入时，浏览器无法确定用户何时希望提交表单。 - j08691

哇，HTML 2。感谢提供链接。 - Rory McCrossan

Answer 1

按下回车键将提交表单，如果您在表单中添加了提交输入，则会自动提交。

    $('#gg').submit(function() {
        alert('s');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="gg" method="post">
    <input name="languageId" type="text"/>
    <input name="languageName" type="text"/>
    <input type="submit"/>
</form>

- Guillaume Georges

---

"only if" 不成立。只有一个文本输入框的表单，当在输入框内按下回车键时会提交。 - j08691

@j08691 你是正确的。我修改了我的答案。感谢你指出这一点。 - Guillaume Georges

Answer 2

一种实现这个的方法是手动设置回车键按下的方式，就像这样：

$('#gg input').keypress(function (e) { // listen to keypress on your input controls
    if (e.which == 13) {   // if enter key...
        $('#gg').submit(); // submit the form
    }
});

这是它的演示效果： https://jsfiddle.net/8md75a6f/3/

- Jonathan.Brink

---

真的不需要返回false。 - charlietfl

我不喜欢这个解决方案，你必须更改你的选择器。如果 OP 有多个表单，则每个表单将提交表单 #gg。 - Alexis

@RogerC的答案可能更好，但我会把这个答案留在这里，以防它能帮助其他人。 - Jonathan.Brink

@Jonathan.Brink 或者您可以将选择器更改为 $(formselector input)，在这种情况下为 $("#gg input")。 - Alexis

Answer 3

实际上，添加一个

<input type="submit" style="display: none;">

似乎解决了一切

- John Smith