Jquery 在HTML表单提交中使用Enter键而不是激活按钮

我有一个HTML表单，有一个

submit

输入，还有各种

按钮

元素。当用户按下“回车”键时，我希望它实际提交表单，但相反（至少在Chrome 15中），我发现它触发了第一个

按钮

（我想这在HTML中比

提交

输入更早发生）

我知道，一般来说，你不能强迫浏览器支持特定的

submit

输入，但我真的认为他们会支持

submit

输入而不是

按钮

元素。我是否可以对HTML进行一些小的调整来实现这一点，或者我是否必须采用某种Javascript方法

下面是HTML的粗略模型：

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>

按钮1

您可以使用jQuery：

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});

---

试试这个，如果按下enter键，你可以像这样捕捉它。例如，前几天我想出了一个答案，看看这是否有帮助

指定表单名称，例如

yourFormName

，这样您就可以提交表单而无需关注表单

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}

考虑到只有一个提交按钮（或者这个解决方案可能甚至没有一个），这里是一个基于jQuery的解决方案，它可以在同一页面上处理多个表单

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>

$（文档）.ready（函数（）{
var makeAllFormSubmitOnEnter=函数（）{
$（'form input，form select'）.live（'keypress'，函数（e）{
if（e.which&&e.which==13）{
$（this.parents（'form'）.submit（）；
返回false；
}否则{
返回true；
}
});
};
makeAllFormSubmitOnEnter（）；
});

您不需要JavaScript来选择默认的提交按钮或输入。您只需要用

type=“submit”

标记它，其他按钮用

type=“button”

标记它们。在您的示例中：

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

按钮1

我刚刚在Chrome、Firefox和IE10中尝试了一下

如上所述-确保您已标记type=“button”、“reset”、“submit”等，以确保它正确级联并选择正确的按钮

---

也许还可以将它们都设置为具有相同的形式（即对我有效的所有形式）

我只是遇到了一个问题。我把

输入

更改为

按钮

，结果失败了，我的

/>

标记终止符写得很糟糕：

所以我有：

<button name="submit_login" type="submit" class="login" />Login</button>

登录

刚刚修改为：

<button name="submit_login" type="submit" class="login">Login</button>

登录

---

现在的作品很有魅力，总是那些烦人的小事。。。HTH

检查这个问题：@OfirFarchy我想我认为这个问题的不同之处在于只有一个提交，其他的都是按钮。如果你不反对使用JS和jQuery，请检查我和david的答案。在某些浏览器中，这实际上并没有像预期的那样起作用。今天我遇到了这个问题，我认为type=“submit”将使其成为默认值，但它在Chrome或Safari中不起作用。它在Chrome和Safari中对我有效。它一定是别的东西。在额外按钮上设置type=“button”和设置type=“submit”才是区别所在。如果不设置

type=“button”

，它不起作用的原因是默认情况下，按钮元素是

type=“submit”

。因此，问题中只有一个提交按钮的前提实际上是不正确的。如果表单有更多的提交按钮，这将有所帮助：document.getElementById（“提交”）。click（）；这是绕过HTML中默认行为的一种笨拙方法。请参阅以了解原因。因为这是公认的答案：向下滚动以获得非常简单的纯HTML解决方案。HTML解决方案是正确的答案。浏览器默认处理我知道这是一个古老的答案，但你不需要使用这种“重型设备”来解决这个问题。使用仅HTML的解决方案（@Jesús Carrera的答案），浏览器现在可以处理这个问题。这种方法的优点是——尽管是的，它确实需要jQuery/JavaScript——即使您需要在表单中有多个提交按钮，它也可以工作。本例中的特定选择器不应在

按钮[type=submit]

后留空格，但前提是您已将默认提交按钮标记为

default

css类。

$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});