¿Cómo detecto pulsaciones de teclas en Javascript?

7 minutos de lectura

avatar de usuario
bobismijnnaam

Después de buscar en Internet, he visto muchas sugerencias (use window.onkeypress, use jQuery, etc.), pero para casi todas las opciones hay un contraargumento. ¿Cómo puedo detectar una pulsación de tecla en Javascript?

  • Sugeriría simplemente escuchar el evento de pulsación de tecla, o posiblemente una de sus contrapartes (keydown o keyup)

    – Kevin B.

    18/04/2013 a las 17:25


  • empieza aqui – api.jquery.com/keypress

    – Mohamed Adil

    18/04/2013 a las 17:25

  • jQuery es JavaScript; la única diferencia es que jQuery es un biblioteca que abstrae las diferencias entre navegadores, para que sea más fácil (pero no necesariamente más eficiente) escribir código entre navegadores.

    –David Tomás

    18 de abril de 2013 a las 17:26


  • Sugiero esto: github.com/madrobby/keymaster

    – Seinop Sys

    18 de abril de 2013 a las 17:28


avatar de usuario
ian

Con Javascript simple, el más simple es:

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

Pero con esto, solo puede vincular un controlador para el evento.

Además, podría usar lo siguiente para poder vincular potencialmente varios controladores al mismo evento:

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

En cualquier caso, keyCode no es consistente en todos los navegadores, por lo que hay más para verificar y descubrir. Observe la e = e || window.event – ese es un problema normal con Internet Explorer, poner el evento en window.event en lugar de pasarlo a la devolución de llamada.

Referencias:

Con jQuery:

$(document).on("keypress", function (e) {
    // use e.which
});

Referencia:

Aparte de que jQuery es una biblioteca “grande”, jQuery realmente ayuda con las inconsistencias entre los navegadores, especialmente con los eventos de ventana… y eso no se puede negar. Con suerte, es obvio que el código jQuery que proporcioné para su ejemplo es mucho más elegante y más corto, pero logra lo que desea de manera consistente. Deberías poder confiar en eso e (el evento) y e.which (el código de tecla, para saber qué tecla se presionó) son precisos. En Javascript simple, es un poco más difícil de saber a menos que haga todo lo que hace internamente la biblioteca jQuery.

Tenga en cuenta que hay un keydown evento, que es diferente a keypress. Puede obtener más información sobre ellos aquí: onKeyPress vs. onKeyUp y onKeyDown

En cuanto a sugerir qué usar, definitivamente sugeriría usar jQuery si está listo para aprender el marco. Al mismo tiempo, diría que debe aprender la sintaxis, los métodos, las características y cómo interactuar con el DOM de Javascript. Una vez que comprenda cómo funciona y qué sucede, debería sentirse más cómodo trabajando con jQuery. Para mí, jQuery hace que las cosas sean más consistentes y más concisas. Al final, es Javascript y envuelve el lenguaje.

Otro ejemplo de jQuery que es muy útil es con AJAX. Los navegadores son inconsistentes con la forma en que se manejan las solicitudes AJAX, por lo que jQuery lo abstrae para que no tenga que preocuparse.

Aquí hay algo que podría ayudar a decidir:

  • Si busca la compatibilidad entre navegadores, es posible que deba tocar en attachEvent() también (y no mi voto negativo, por cierto).

    –David Tomás

    18 de abril de 2013 a las 17:27


  • @DavidThomas No estoy preocupado por los votos negativos, prefiero transmitir el punto correcto. ¿Es mejor la respuesta? Estaré feliz de agregar/cambiar cualquier cosa

    – Ian

    18/04/2013 a las 17:43

  • Parece sólido, gracias por la explicación! Creo que me iré con jQuery, lo he estado investigando un poco más y supongo que me beneficiará de todos modos si aprendo a trabajar con él.

    – bobismijnnaam

    18 de abril de 2013 a las 18:11

  • Creo que vale la pena señalar que keypress no funcionó en mi caso, así que tuve que usar keydown.

    – William Jones

    19 de febrero de 2019 a las 20:14

  • @WilliamJones ¡Eso es porque está en desuso! Acabo de revisar los documentos y me encontré con esa sorpresa: desarrollador.mozilla.org/en-US/docs/Web/API/Document/….

    – José A.

    9 de junio de 2019 a las 19:24

  • Las teclas de flecha son en realidad, “Flecha arriba”, “Flecha abajo”, “Flecha derecha”, “Flecha izquierda”

    – Capitán Fantástico

    13 de abril de 2018 a las 3:31

  • ¿Por qué no puedo “atrapar” estas teclas de flecha o el [Esc] ¿llave?

    – Apóstoles

    5 de marzo de 2021 a las 19:18

  • Para ‘capturar’ la prensa: stackoverflow.com/a/46210516/974045

    – Gibolt

    5 de marzo de 2021 a las 21:16

No te compliques demasiado.

  document.addEventListener('keydown', logKey);
    function logKey(e) {
      if (`${e.code}` == "ArrowRight") {
        //code here
      }
          if (`${e.code}` == "ArrowLeft") {
        //code here
      }
          if (`${e.code}` == "ArrowDown") {
        //code here
      }
          if (`${e.code}` == "ArrowUp") {
        //code here
      }
    }

  • ¡Felicitaciones! ¡Esta respuesta debería obtener todos los créditos! Además de ser el solo uno que puede “capturar” las teclas de flecha y el [Esc] clave, donde todo el código anterior falló (al menos para mí), si en realidad captura TODAS las teclas del tecladoincluso las teclas de estado!!

    – Apóstoles

    5 de marzo de 2021 a las 19:31

  • Una cosa más: ¿Cómo elimino este detector de eventos? probé con document.removeEventListener()pero no funciona: el oyente continúa activo, es decir, ¡el teclado continúa siendo monitoreado!

    – Apóstoles

    6 de marzo de 2021 a las 11:06

  • Si bien esta respuesta puede no ser lo que el OP está buscando, ya que se trata solo de presionar teclas (aunque la presión de teclas en general se vuelve obsoleta y los nuevos eventos como keydown/keyup/beforeinput son útiles y la pregunta tiene 8 años), aún así podría agregue que keydown sigue disparando el evento mientras mantiene presionada la tecla, lo que no siempre es excelente. Entonces, en su lugar, agregue event.repeat = false para evitar eso.

    – Thielicious

    9 de marzo de 2021 a las 20:52

avatar de usuario
faíno

Hay algunas formas de manejar eso; Vanilla JavaScript puede hacerlo bastante bien:

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

O una forma más estructurada de manejarlo:

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);

  • ¡Felicitaciones! ¡Esta respuesta debería obtener todos los créditos! Además de ser el solo uno que puede “capturar” las teclas de flecha y el [Esc] clave, donde todo el código anterior falló (al menos para mí), si en realidad captura TODAS las teclas del tecladoincluso las teclas de estado!!

    – Apóstoles

    5 de marzo de 2021 a las 19:31

  • Una cosa más: ¿Cómo elimino este detector de eventos? probé con document.removeEventListener()pero no funciona: el oyente continúa activo, es decir, ¡el teclado continúa siendo monitoreado!

    – Apóstoles

    6 de marzo de 2021 a las 11:06

  • Si bien esta respuesta puede no ser lo que el OP está buscando, ya que se trata solo de presionar teclas (aunque la presión de teclas en general se vuelve obsoleta y los nuevos eventos como keydown/keyup/beforeinput son útiles y la pregunta tiene 8 años), aún así podría agregue que keydown sigue disparando el evento mientras mantiene presionada la tecla, lo que no siempre es excelente. Entonces, en su lugar, agregue event.repeat = false para evitar eso.

    – Thielicious

    9 de marzo de 2021 a las 20:52

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad