JQuery - Целевая кнопка с клавишей ввода при фокусировке поля ввода

У меня есть поле ввода и кнопка входа. Я хочу разрешить пользователям нажать клавишу "enter", чтобы щелкнуть кнопку, когда поле ввода сфокусировано. Как мне сделать это с помощью jQuery?

<input type="text" size="10" id="loginUserID" name="username">
<input type="button" value="Login" name="loginBtn" id="loginBtn">

Ответ 1

$('#loginUserID').keypress(function(event){
  if(event.keyCode == 13){
    $('#loginBtn').click();
  }
});

Демо: http://jsfiddle.net/Bhf5a/

Ответ 2

Для этого вам не нужен jQuery, просто измените кнопку на type="submit":

<input type="text" size="10" id="loginUserID" name="username">
<input type="submit" value="Login" name="loginBtn" id="loginBtn">

Затем <form> отправит все сам по себе, когда вы нажмете Enter внутри ввода текста.

Ответ 3

Если они находятся в одной форме, и вы меняете кнопку type="submit", вы должны найти ее автоматически, но в любом случае...

$(document).ready(function() {

   $('#loginUserID').keypress(function(e){
      if(e.which === 13)
         $('#loginBtn').click();
   });

});

(Или вы можете предпочесть .keyup или .keydown.)

Ответ 4

Принятый ответ и большинство других дают само собой разумеющееся, что действие click() может прекратить обработку событий, отправив форму и переключившись на другую страницу, или что в форме не существует какой-либо формы, поэтому они опустить остановку цепи событий, но это может быть не так.

Не забудьте вызвать e.preventDefault() перед вызовом click() на целевой кнопке. Или еще, первая кнопка в форме будет по-прежнему запускаться при вводе, в дополнение к вашему клику!

$('#loginUserID').keypress(function(event) {
    if(event.keyCode == 13) {
        e.preventDefault(); // Stop the default behaviour
        $('#loginBtn').click();
    }
});

Ответ 5

Ответ не работает, когда триггер где-то прикреплен в коде asp.net adn не в js или jquery. То, что прекрасно работает, - это фокусировка на кнопке. В вашем случае замените мои имена (сгенерированные sharepoint) полями с полями входа

    <script type ="text/javascript">
    $(document).ready(function () {
        var zoekveld = $( "input[name='ctl00$m$g_02abe20b_56ca_4744_a694_5bc31dd14f49$ctl02']" );
        var loep = $( "input[name='ctl00$m$g_02abe20b_56ca_4744_a694_5bc31dd14f49$ctl04']" );
        zoekveld.keypress(function(e){
            //alert("gevonden op name");
            var key = e.which;
            if(key == 13){
                 //alert("op enter geklikt");
                  loep.focus();
             }
        });         
    });
 </script>