Programatik

September 6, 2007

Detección de pulsación de teclas con javascript

Filed under: JavaScript — Rafa @ 6:02 pm

He estado buscando la forma de detectar mediante javascript las pulsaciones de teclas de forma que sea compatible con otros navegadores además de Internet Explorer.

La clave está en que para detectar la pulsación de teclas debemos tener presentes que dicha detección se hace siempre desde un evento keypress, keyup o keydown.

Una demostración puede verse en esta dirección del lab:

Demostración de la detección de la tecla pulsada

Para que sea compatible con otros navegadores (no solo Internet Explorer), tomamos el elemento del DOM sobre el que vamos a detectar la pulsación de teclas y le asociamos una función anónima al evento de pulsación (keypress, keydown o keyup) a la que se pasa el evento como argumento.

Y, como siempre, el código para descargar, aquí.

Enlaces

  • http://www.rafachacon.com/lab/javascript-pulsacion-de-teclas/
  • http://www.rafachacon.com/lab/javascript-pulsacion-de-teclas/javascript-pulsacion-de-teclas.zip
  • 6 Comments »

    1. Hmmm… muy interesante…

      Como detectarias _combinaciones_ de teclas? Por ejemplo, ALT+R. O CTRL+B…

      Comment by Luis — September 18, 2007 @ 3:50 pm

    2. En caso de buscar una combinación de teclas se podría construir un buffer que fuera guardando una o dos pulsaciones y en el momento de detectar la combinación deseada lanzara algún evento.

      Comment by Rafa — December 19, 2007 @ 10:18 pm

    3. Rafa, como se haría para capturar las teclas desde una pda con windows mobile 6, es decir yo desde el explorador de la pda intruduzco la pagina para averiguar que tecla es la que pulso con el teclado de la pda pero no me muestra nada.

      gracias

      Comment by carlos — November 30, 2009 @ 1:30 pm

    4. Hola Carlos. No tengo la más remota idea, pero buscaré en Google a ver si existe un juego de códigos distinto o es otro asunto.

      Saludos.

      Comment by Rafa — November 30, 2009 @ 4:21 pm

    5. Rafa:

      He aqui un codigo para detectar combinaciones de teclas con ctrl / alt / shift.

      function teclas(e) {
      var ctrlPressed = 0;
      var altPressed = 0;
      var shiftPressed = 0;

      if (window.event) { // IE
      keynum = window.event.keyCode;
      }
      else if (e.which) { // Netscape/Firefox/Opera
      keynum = e.which;
      }

      if (parseInt(navigator.appVersion) > 3) {
      var evt = (navigator.appName == “Netscape”) ? e : event;

      if (navigator.appName==”Netscape” && parseInt(navigator.appVersion) == 4) {

      // NETSCAPE 4 CODE

      var mString = (e.modifiers + 32).toString(2).substring(3, 6);
      shiftPressed = (mString.charAt(0) == “1″);
      ctrlPressed = (mString.charAt(1) == “1″);
      altPressed = (mString.charAt(2) == “1″);
      }
      else {

      // NEWER BROWSERS [CROSS-PLATFORM]

      shiftPressed = evt.shiftKey;
      altPressed = evt.altKey;
      ctrlPressed = evt.ctrlKey;
      }
      }

      if (ctrlPressed && keynum == 82)
      alert(’Se ha pulsado CTRL+R’);
      }

      campoinput.onkeydown = teclas;

      Funciona en IE y Firefox. Lo unico malo es que no cancela la acción predeterminada de dicha combinacion de teclas (por ejemplo, CTRL+R recarga la pagina.

      Saludos

      Comment by Rogelio — June 7, 2010 @ 7:08 pm

    6. Ah, si, si que lo hace, lo unico que hay que hacer es que la funcion retorne false.

      Saludos

      Comment by Rogelio — June 7, 2010 @ 7:11 pm

    RSS feed for comments on this post. TrackBack URL

    Leave a comment

    *
    To prove that you're not a bot, enter this code
    Anti-Spam Image

    Powered by WordPress