在 HTML 表单提交上制作 Enter 键而不是激活按钮

Question

我有一个带有单个 submit 输入的 HTML 表单，还有各种 button 元素。当用户按下“输入”键时，我希望它实际提交表单，但相反（至少在 Chrome 15 中）我发现它触发了第一个 button（因为它发生在 HTML 的早期比submit 输入，我猜）。

我知道通常你不能强迫浏览器偏爱特定的submit 输入，但我真的认为他们会偏爱submit 输入而不是button 元素。我可以对 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>

Answer 1

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

Answer 2

我只是遇到了这个问题。将input 更改为button 导致我的失败，而且我的/> 标记终止符写得不好：

所以我有：

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

并且刚刚将其修改为：

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

现在就像一个魅力，总是烦人的小东西...... HTH

Answer 3

试试这个，如果按下回车键，你可以像这样捕获它，例如，我前几天开发了一个答案html button specify selected，看看这是否有帮助。

指定表单名称，例如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();
  }
}

Answer 4

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

如上所述 - 确保您已使用 type = "button"、"reset"、"submit" 等进行标记，以确保其正确级联并选择正确的按钮。

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

Answer 5

您不需要 JavaScript 来选择您的默认提交按钮或输入。您只需用type="submit" 标记它，其他按钮用type="button" 标记它们。在您的示例中：

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

Answer 6

鉴于只有一个（或者此解决方案可能甚至没有一个）提交按钮，这里是基于 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>

Answer 7

你可以使用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;
        }
    });
});