¿Evento JQuery para el usuario que presiona enter en un cuadro de texto?

250

¿Hay algún evento en Jquery que se active solo si el usuario presiona el botón Intro en un cuadro de texto? ¿O algún complemento que se pueda agregar para incluir esto? Si no, ¿cómo escribiría un complemento rápido que hiciera esto?

javascript jquery jquery-events Haga clic en Upvote
fuente

446

Puedes conectar tu propio evento personalizado

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

Jishnu AP
fuente

11

Vale la pena señalar que en un escenario de detección de ingreso para evitar el envío del formulario, el evento "keyup" no es óptimo porque el formulario detecta el envío al presionar el teclado. Por lo tanto, "keydown" o "keypress" podrían ser mejores en ese caso.

TechNyquist

77

Tenga en cuenta que bind () está en desuso en jQuery 3.0.

Bart Friederichs

Diferentes navegadores tienen diferentes e.keyCodeteclas, mejor uso e.which, esto garantizará que maneje el mismo botón en cada navegador

Oleg Shakhov

99

   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });

Etienne Dupuis
fuente

8

Gracias. Esta solución se ajustó a mi caso de uso. Sin embargo, vale la pena señalar que una vez que se realiza cualquier procesamiento, es posible que desee agregar `$ (this) .removeAttr (" disabled ");` para volver a habilitar el cuadro de texto.

misterjaytee

39

Aquí hay un complemento para usted: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )

$.fn.pressEnter = function(fn) {  

    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

//use it:
$('textarea').pressEnter(function(){alert('here')})

Naftali aka Neal
fuente

Agradable. Mucho más simple que esa URL que publiqué. Me pregunto qué diablos el artículo que he publicado se trata y por qué se tarda tanto código ..

CaptSaltyJack

1

Demasiado tarde, ya he escrito el mío: P. También hace el mismo trabajo en menos líneas ... además, usar la $variable para el complemento no es una buena idea ya que puede causar conflictos.

Haga clic en Upvote el

@Neal, ¿sabes cómo debería cambiarse el código del complemento que publiqué en la respuesta aceptada, para que uno pueda hacerlo $("#myInput").bind('click, onEnter', myCallback);y funcione sin necesidad de nada más?

Haga clic en Upvote el

1

@ClickUpvote # 1: elimínelo de la respuesta, luego podemos hablar.

Naftali aka Neal

@Neal Amazing solution man. ¡Acabo de copiar esa función! ¡Gracias!

Bilal Fazlani

17

heres un complemento jquery para hacer eso

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);    
        });               
        return this; 
     };
})(jQuery);

para usarlo, incluya el código y configúrelo así:

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");                
    });
});

jsfiddle de él aquí http://jsfiddle.net/VrwgP/30/

jzilla
fuente

2

Agradable, llamaría a la devolución de llamada usando func.apply(this), de esa manera dentro de la función de devolución de llamada que puede usar thisnormalmente para acceder al elemento en el que se activó el evento.

Haga clic en Upvote el

Sí, un buen punto sobre func.apply (esto), ni siquiera lo había considerado.

jzilla

Agradable y conciso, pero agregaría que detener la propagación y los valores predeterminados sería una buena idea en la mayoría de los casos, para evitar el envío de cualquier formulario. Solo agregue e.preventDefault(); e.stopPropagation();dentro del if (e.keyCode)bit.

Irongaze.com

8

Cabe señalar que el uso de live()en jQuery ha quedado en desuso desde la versión 1.7y se ha eliminado en jQuery 1.9. En cambio, on()se recomienda el uso de .

Sugeriría encarecidamente la siguiente metodología para la unión, ya que resuelve los siguientes desafíos potenciales:

Al vincular el evento document.bodyy pasar $ selector como el segundo argumento para on(), los elementos se pueden adjuntar, separar, agregar o eliminar del DOM sin necesidad de lidiar con eventos de re-enlace o doble enlace. Esto se debe a que el evento se adjunta en document.bodylugar de hacerlo $selectordirectamente, lo que significa que $selectorse puede agregar, eliminar y agregar nuevamente y nunca cargará el evento vinculado a él.
Al llamar off()antes on(), este script puede vivir dentro del cuerpo principal de la página o dentro del cuerpo de una llamada AJAX, sin tener que preocuparse por eventos de doble enlace accidentalmente.
Al envolver el script dentro $(function() {...}), este script puede ser cargado nuevamente por el cuerpo principal de la página o dentro del cuerpo de una llamada AJAX. $(document).ready()no se dispara por solicitudes AJAX, mientras que $(function() {...})sí.

Aquí hay un ejemplo:

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>

Joshua Burns
fuente

4

Si su entrada es search, también puede usar on 'search'evento. Ejemplo

<input type="search" placeholder="Search" id="searchTextBox">

.

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});

Phan Van Linh
fuente

3

Código HTML:-

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />      

<input type="button" id="btnclick">

Java Script Code

function AddKeyPress(e) { 
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

Su formulario no tiene el botón Enviar predeterminado

yogesh lodha
fuente

2

Otra variación sutil. Fui por una ligera separación de poderes, por lo que tengo un complemento para permitir la captura de la tecla Intro, luego simplemente me conecto a los eventos normalmente:

(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);

Y luego en uso:

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

Esta variación le permite usar la delegación de eventos (para enlazar elementos que aún no ha creado).

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });

Wilco
fuente

0

No pude hacer que el keypressevento se activara con el botón enter, y me rasqué la cabeza por un tiempo, hasta que leí los documentos de jQuery:

" El evento de pulsación de tecla se envía a un elemento cuando el navegador registra la entrada del teclado. Esto es similar al evento de pulsación de tecla, excepto que el modificador y las teclas que no se imprimen como Shift, Esc y eliminan eventos de pulsación de tecla de activación pero no eventos de pulsación de tecla " . https://api.jquery.com/keypress/ )

Tuve que usar el evento keyupo keydownpara presionar el botón enter.

Arne M
fuente

¿Evento JQuery para el usuario que presiona enter en un cuadro de texto?

Respuestas: