在HTML表单上设置Enter键而不是激活按钮

I have an HTML form with a single submit input, but also various button elements. When the user presses the 'enter' key, I'd expect it to actually submit the form, but instead (within Chrome 15 at least) I'm finding that it's triggering the first button (since that occurs earlier in the HTML than the submit input, I guess).

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

I know that in general you can't force browsers to favour a particular submit input, but I really thought they would favour submit inputs over button elements. Is there a small tweak I can make to the HTML to make this work, or am I going to have to embrace some kind of Javascript approach?

我知道通常你不能强迫浏览器支持特定的提交输入，但我真的认为他们更愿意提交输入而不是按钮元素。是否可以对HTML进行一些小的调整以使其工作，或者我将不得不采用某种Javascript方法？

Here's a rough mockup of the HTML:

这是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>

7 个解决方案

#1

You can use jQuery:

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

#2

101

You don't need JavaScript to choose your default submit button or input. You just need to mark it up with type="submit", and the other buttons mark them with type="button". In your example:

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

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

#3

Try this, if enter key was pressed you can capture it like this for example, I developed an answer the other day html button specify selected, see if this helps.

试试这个，如果输入键被按下你可以像这样捕获它，例如，我在前几天开发了一个答案html按钮指定选中，看看这是否有帮助。

Specify the forms name as for example yourFormName then you should be able to submit the form without having focus on the form.

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

#4

I just hit a problem with this. Mine was a fall off from changing the input to a button and I'd had a badly written /> tag terminator:

我刚刚遇到了这个问题。我将输入更改为按钮是一个失败，我有一个写得不好的/>标签终止符：

So I had:

所以我有：

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

And have just amended it to:

并将其修改为：

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

Now works like a charm, always the annoying small things... HTH

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

#5

Given there is only one (or with this solution potentially not even one) submit button, here is jQuery based solution that will work for multiple forms on the same page...

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

#6

I just gave this a whirl in both Chrome and Firefox and IE10.

我只是在Chrome和Firefox以及IE10中都给了它一个旋转。

As mentioned above - make sure that you have marked up with type = "button", "reset", "submit" etc to ensure that it correctly cascades and chooses the correct button.

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

Perhaps also setting all of them to have the same form (ie all as that worked for me)

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

#7

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

#1