2.3.2.- Eventos del teclado en JavaScript.

Uno de los eventos más complicados de gestionar en JavaScript son los eventos de teclado, debido a que suele haber bastantes incompatibilidades entre navegadores, teclados, idiomas, etc.

Para el teclado disponemos de 3 tipos de eventos: keydown, keypress y keyup. Y además disponemos de dos tipos de teclas: las especiales (Shift, Alt, AltGr, Enter, etc.) y las teclas normales, que contienen letras, números, y símbolos.

En el proceso de pulsación de una tecla se generan tres eventos seguidos: keydown, keypress y keyup. Y para cada uno de ellos disponemos de las propiedades keyCode y charCode. Para saber la tecla que se ha pulsado lo más cómodo es acceder al evento keypress.

• keydown: se produce al presionar una tecla y mantenerla presionada.
  • Su comportamiento es el mismo en todos los navegadores.
  • Propiedad keyCode: devuelve el código interno de la tecla.
  • Propiedad charCode: no está definida.
• keypress: se produce en el instante de presionar la tecla.
  • Propiedad keyCode: devuelve el código interno de las teclas especiales, para las teclas normales no está definido.
  • Propiedad charCode: devuelve 0 para las teclas especiales o el código del carácter de la tecla pulsada para las teclas normales.

    (En Internet Explorer keyCode devuelve el carácter de la tecla pulsada, y charCode no está definido).

• keyup: se produce al soltar una tecla presionada .
  • Su comportamiento es el mismo en todos los navegadores.
    • Propiedad keyCode: devuelve el código interno de la tecla.
    • Propiedad charCode: no está definida.

Ejemplo que mueve el foco de un campo de texto a otro, dentro de un formulario, al pulsar la tecla ENTER dentro de cada campo:

<form name="formulario" id="formulario">
     <label for="nombre">Nombre: </label>
     <input type="text" id="nombre" name="nombre" />
     <label for="apellidos">Apellidos: </label>
     <input type="text" id="apellidos" name="apellidos" />
     <label for="provincia">Provincia: </label>
     <input type="text" id="provincia" name="provincia" />
     <input type="button" id="enviar" value="Enviar" />
</form>
........
<script type="text/javascript">
      const cambiar = (evt) => {
           if (evt.keyCode == 13)  // Código de la tecla Enter
                if (this.nextSibling.nextSibling.type == "text")
                     this.nextSibling.nextSibling.focus();
      }
      let inputs = document.getElementsByTagName("input");
      for (let i = 0;  i < inputs.length; i++) {
           inputs[i].addEventListener("keypress", cambiar, false);
      }
</script>

En la estructura del formulario, los campos del formulario no llevan saltos de línea entre unos y otros, por las siguientes razones:

• this.nextSibling - hace referencia al siguiente hermano al actual (la siguiente etiqueta label del siguiente campo).
• this.nextSibling.nextSibling - hermano siguiente, al hermano del elemento actual. (será otro elemento input. Si pusiéramos un salto de línea entra campos input entonces ya ese this.nextSibling.nextSibling ya no sería un campo input y sería un nodo de texto con el carácter \n del salto de línea que hemos puesto como separador de los campos input).