Detectar y responder a eventos de teclado en JavaScript

Spanish (Español) translation by Andrijana Mitevska (you can also view the original English article)

En este artículo, analizaremos cómo puede detectar y responder a diferentes eventos de teclado en JavaScript. Le mostraré un par de ejemplos del mundo real para que sea más fácil de entender.

JavaScript es una de las tecnologías centrales de la web. La mayoría de los sitios web lo utilizan y todos los navegadores web modernos lo admiten sin necesidad de complementos. En esta serie, discutimos diferentes consejos y trucos que lo ayudarán en su desarrollo diario de JavaScript.

Como desarrollador de JavaScript, a veces necesita implementar funciones que requieren que se ocupe de los eventos del teclado y realice acciones basadas en ellos. Afortunadamente, JavaScript proporciona un objeto KeyboardEvent integrado, que le permite manejar diferentes tipos de eventos de teclado.

Eventos de teclado en JavaScript

En JavaScript, el objeto KeyboardEvent proporciona tres eventos: tecla abajo, tecla presionada y tecla arriba.

Cuando presiona cualquier tecla del teclado, se llevan a cabo una serie de eventos en el siguiente orden.

tecla abajo
pulsación de tecla
tecla Arriba

Cuando presiona cualquier tecla del teclado, se activa el evento de tecla hacia abajo. Y si se pulsa una tecla durante mucho tiempo, el evento de tecla pulsada se activa repetidamente.

El evento de pulsación de tecla se activa principalmente cuando presiona cualquier carácter imprimible y se activa después del evento de pulsación de tecla. De hecho, el evento de pulsación de tecla se utiliza para transmitir un carácter resultante del evento de pulsación de tecla. La mayoría de las veces, el evento de pulsación de tecla no se genera mediante teclas que no son caracteres. Aunque algunos navegadores admiten este evento, no se recomienda confiar en este evento, ya que se eliminará de los estándares web.

Los eventos de pulsación de teclas están obsoletos y se eliminarán gradualmente de los navegadores modernos.

Finalmente, el evento key up se genera cuando se suelta una tecla. Básicamente, una combinación de eventos de tecla hacia abajo y tecla hacia arriba le proporciona un código que indica la tecla que se presionó.

Cada evento de teclado proporciona dos propiedades importantes: clave y código. La propiedad de la tecla se completa con el carácter que se presionó y la propiedad del código se completa con la ubicación de la tecla física del carácter. Por ejemplo, si presiona la tecla de carácter a, la propiedad de la clave se completa con a, y la propiedad de código se completa con la constante KeyA. Sin embargo, el código de la tecla presionada no es necesariamente el mismo que el del carácter. Si un usuario ha configurado una distribución de teclado alternativa, por ejemplo, Dvorak, al presionar el mismo código de tecla se producirá un carácter diferente.

Esa fue una breve descripción general de los eventos de teclado en JavaScript. A partir de la siguiente sección, analizaremos estos eventos junto con ejemplos del mundo real para comprender cómo funcionan.

El evento `keydown`

En esta sección, veremos cómo funciona el evento keydown en JavaScript. El evento keydown se activa cuando se presiona cualquier tecla en el teclado.

Repasemos rápidamente el siguiente ejemplo.

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyValue: " + keyValue);
  console.log("codeValue: " + codeValue);
}, false);

Como puede ver, hemos creado un oyente para escuchar el evento keydown. Siempre que se presiona cualquier tecla, se llama a nuestro oyente y éste registra los valores de la clave y el código en la consola. Continúe y ejecútelo para ver cómo funciona.

Veamos el siguiente ejemplo, que demuestra cómo puede detectar si el usuario ha presionado ctrl + a o ctrl + A.

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey) {
     if (event.keyCode == 65 || event.keyCode == 97) {
         console.log("You have just pressed Ctrl + a/A!");
     }
  }
}, false);

En primer lugar, ctrlKey es una propiedad especial del objeto KeyboardEvent, que le indica si se presionó la tecla Ctrl cuando se activó el evento keydown. Entonces, si ctrlKey es verdadero, significa que se presionó la tecla Ctrl.

A continuación, verificamos el valor de keyCode del carácter que se presionó, si es 65 o 97, significa que se presionó a o A junto con la tecla Ctrl. La propiedad keyCode del objeto KeyboardEvent devuelve el código de carácter Unicode de la tecla que se presionó. De manera similar, también puede usar la propiedad shiftKey del objeto KeyboardEvent, que le indica si se presionó la tecla Shift cuando se activó el evento key down.

Finalmente, veamos el siguiente ejemplo, que demuestra cómo puede permitir solo alfabetos en el campo de entrada de un formulario HTML.

<script>
function allowOnlyAlphabets(event) {
  var charCode = event.keyCode;

  if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
    return true;
  else
    return false;
}
</script>
<html>
  <body>
    <div>
        <input type="text" onkeydown="return allowOnlyAlphabets(event);">
    </div>
  </body>
</html>

En el ejemplo anterior, hemos definido el evento keydown en el cuadro de texto de entrada. Entonces, cuando el usuario ingresa cualquier texto en el cuadro de texto, llama a la función allowOnlyAlphabets. En la función allowOnlyAlphabets, validamos el valor de la propiedad keyCode del objeto de evento con el rango Unicode válido para alfabetos. Por lo tanto, si el usuario presiona un carácter alfabético válido, la función allowOnlyAlphabets devuelve verdadero; de lo contrario, devolvería falso. El resultado final es que el usuario no podrá escribir más caracteres que el alfabeto.

El evento `keyup`

En esta sección, veremos cómo funciona el evento de activación. De hecho, funciona de manera bastante similar al evento keydown, con la única diferencia de que se activa cuando se suelta la tecla en lugar de cuando se presiona la tecla.

Veamos el siguiente ejemplo.

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keydown event, keyValue: " + keyValue);
  console.log("keydown event, codeValue: " + codeValue);

}, false);

document.addEventListener('keyup', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyup event, keyValue: " + keyValue);
  console.log("keyup event, codeValue: " + codeValue);
}, false);

En el ejemplo anterior, cuando presiona cualquier tecla, primero se activará el evento keydown seguido por el evento keyup. Por ejemplo, si presiona la tecla a, debería ver el siguiente resultado en la consola. Es importante tener en cuenta el orden de los eventos que se activan.

1	keydown event, keyValue: a
2	keydown event, codeValue: KeyA
3	keyup event, keyValue: a
4	keyup event, codeValue: KeyA

Veamos el siguiente ejemplo, que demuestra cómo puede utilizar el evento keyup en sus proyectos.

<script>
function getSearchResults(event, element) {
  if (element.value.length > 6) {
    var searchKeyword = element.value;
    // make an AJAX call to fetch search results for "searchKeyword"
  }
}
</script>
<html>
  <body>
    <div>
           <input type="text" onkeyup="return getSearchResults(event, this);">
    </div>
  </body>
</html>

En el ejemplo anterior, hemos definido el evento onkeyup en el cuadro de texto de entrada. Entonces, cuando el usuario ingresa cualquier texto en el cuadro de texto, llama a la función getSearchResults. En la función getSearchResults, realizaremos una llamada AJAX para obtener resultados de búsqueda para la palabra clave de búsqueda. Esto también se denomina búsqueda en vivo, ya que mostrará los resultados de la búsqueda al instante sin actualizar toda la página.

Propiedades importantes del objeto `KeyboardEvent`

En esta última sección, resumiré propiedades importantes del objeto KeyboardEvent. De hecho, ya hemos visto un par de propiedades de uso común, como clave y código, en los ejemplos que hemos discutido hasta ahora. También hay algunas otras propiedades importantes que analizaremos en esta sección.

Tecla: devuelve el carácter que se presiona. Por ejemplo, si se presiona el carácter a, devolvería a.
código: devuelve el código de la clave física del personaje. Por ejemplo, si se presiona un carácter, devolvería KeyA.
keyCode: devuelve el código de carácter Unicode de la tecla que se presiona.
ctrlKey: le dice si se presionó la tecla Ctrl cuando se activó el evento de tecla.
altKey: le dice si se presionó la tecla Alt cuando se activó el evento de tecla.
shiftKey: le dice si se presionó la tecla Shift cuando se activó el evento de tecla.
metaKey: le dice si se presionó la tecla Meta cuando se activó el evento de tecla. En la mayoría de los casos, la tecla Meta es la tecla que se encuentra entre las teclas Ctrl y Alt de su teclado.
ubicación: devuelve la ubicación de una tecla en el teclado o dispositivo.

Como puede ver, el objeto keyboardEvent proporciona varias propiedades que le permiten detectar diferentes teclas. En la mayoría de los casos, utilizará el evento keydown para detectar las teclas que se presionaron y realizar las acciones correspondientes. Y como discutimos anteriormente, no debe usar el evento de pulsación de tecla, ya que tarde o temprano quedará obsoleto.

Conclusión

Hoy, discutimos cómo puede trabajar con eventos de teclado en JavaScript junto con un par de ejemplos del mundo real.