Làm cho phím Enter trên biểu mẫu HTML gửi thay vì nút kích hoạt

Tôi có một biểu mẫu HTML với một submitđầu vào duy nhất , nhưng cũng có nhiều buttonphần tử khác nhau . Khi người dùng nhấn phím 'enter', tôi muốn nó thực sự gửi biểu mẫu, nhưng thay vào đó (ít nhất là trong Chrome 15), tôi thấy rằng nó đang kích hoạt phím đầu tiên button(vì điều đó xảy ra sớm hơn trong HTML so với submitđầu vào , Tôi đoán).

Tôi biết rằng nói chung bạn không thể buộc trình duyệt ưu tiên một submitđầu vào cụ thể , nhưng tôi thực sự nghĩ rằng họ sẽ ưu tiên submitđầu vào hơn buttoncác phần tử. Có một điều chỉnh nhỏ nào mà tôi có thể thực hiện đối với HTML để làm cho nó hoạt động hay tôi sẽ phải áp dụng một số loại phương pháp tiếp cận Javascript?

Đây là một mô phỏng sơ bộ của 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>

Bạn không cần JavaScript để chọn nút gửi hoặc đầu vào mặc định của mình. Bạn chỉ cần đánh dấu nó bằng type="submit"và các nút khác đánh dấu chúng bằng type="button". Trong ví dụ của bạn:

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

Bạn có thể sử dụng 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;
        }
    });
});

Hãy thử điều này, nếu phím enter được nhấn, bạn có thể chụp nó như thế này chẳng hạn, tôi đã phát triển một câu trả lời vào ngày hôm trước nút html chỉ định được chọn , xem điều này có giúp ích không.

Chỉ định tên biểu mẫu chẳng hạn, yourFormNamesau đó bạn sẽ có thể gửi biểu mẫu mà không cần tập trung vào biểu mẫu.

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();
  }
}

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

Tôi chỉ gặp một vấn đề với điều này. Của tôi đã thất bại trong việc thay đổi inputthành a buttonvà tôi đã có một />dấu chấm dứt thẻ viết xấu :

Vì vậy, tôi đã có:

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

Và vừa sửa đổi nó thành:

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

Bây giờ hoạt động như một cái duyên, luôn là những thứ nhỏ nhặt khó chịu ... HTH

Do chỉ có một (hoặc với giải pháp này có khả năng không phải là một) nút gửi, đây là giải pháp dựa trên jQuery sẽ hoạt động cho nhiều biểu mẫu trên cùng một trang ...

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

Tôi vừa giới thiệu điều này trong cả Chrome, Firefox và IE10.

Như đã đề cập ở trên - hãy đảm bảo rằng bạn đã đánh dấu bằng type = "button", "reset", "submit", v.v. để đảm bảo rằng nó phân tầng chính xác và chọn đúng nút.

Có lẽ cũng đặt tất cả chúng có cùng một hình thức (tức là tất cả đều phù hợp với tôi)