habilitar - jQuery: botón de destino con la tecla Intro cuando el campo de entrada está enfocado

input tags

Question

Tengo un campo de entrada y un botón de inicio de sesión. Quiero permitir que los usuarios presionen la tecla "enter" para hacer clic en el botón cuando el campo de entrada está enfocado. ¿Cómo haría esto con jQuery?

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

Answer 1

La respuesta aceptada, y la mayoría de las otras, dan por sentado que la acción click () podría terminar con el manejo del evento enviando el formulario y cambiando a otra página, o que no haya un envío en algún lugar del formulario, por lo que omiten detener el proceso. cadena de eventos, pero este podría no ser el caso.

No olvide llamar a e.preventDefault() antes de llamar a click() en el botón de destino. O bien, el primer botón del formulario aún se activará al ingresar, ¡además de su clic!

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

Answer 2

La respuesta no funciona cuando el activador está en algún lugar adjunto en el código asp.net y no en js o jquery. Lo que funciona bien es establecer el enfoque en el botón. En su caso, reemplace mis campos nombrados (sharepoint generados) con sus campos de inicio de sesión

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

Answer 3

No necesitas jQuery para esto, solo cambia el botón para type="submit" :

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

Luego, la <form> enviará todo por sí mismo cuando presione Entrar dentro de la entrada de texto.

Answer 4

Si están en la misma forma y cambias el botón para que sea type="submit" , deberías encontrar que sucede automáticamente, pero de todos modos ...

$(document).ready(function() {

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

});

(O puede que prefiera .keyup o .keydown ).

Answer 5

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

Demostración: http://jsfiddle.net/Bhf5a/