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

Question

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

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

Dưới đây là một mockup thô 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> 

Answer 1

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

Answer 2

Hãy thử điều này, nếu nhập chính là ép bạn có thể chụp nó như thế này ví dụ, tôi phát triển một câu trả lời vào ngày khác html button specify selected, xem điều này có giúp ích gì không.

Chỉ định tên biểu mẫu như ví dụ yourFormName thì 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(); 
    } 
} 

Answer 3

Do chỉ có một (hoặc với giải pháp này có khả năng thậm chí không một) nút gửi, giải pháp ở đây là jQuery dựa rằng sẽ làm việc cho nhiều hình thức 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> 

Answer 4

Bạn không cần JavaScript để chọn nút hoặc đầu vào gửi 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"/> 

Answer 5

Tôi vừa cho bạn điều này trong cả Chrome và Firefox và IE10.

Như đã đề cập ở trên - đảm bảo rằng bạn đã đánh dấu bằng loại = "nút", "đặt lại", "gửi" v.v. để đảm bảo rằng nó được xếp đúng và chọn nút chính xác.

Có lẽ cũng đặt tất cả chúng để có cùng một biểu mẫu (nghĩa là tất cả những gì đã làm việc cho tôi)

Answer 6

Tôi vừa mới gặp sự cố với điều này. Mine là một mùa thu đi từ việc thay đổi input đến một button và tôi muốn có một nặng bằng văn bản /> thẻ terminator:

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

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

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

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

Bây giờ hoạt động giống như một nét duyên dáng, lúc nào cũng là những điều nhỏ nhặt gây phiền nhiễu ... HTH

Answer 7

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