Cada vez son mas las paginas web que optimizan sus sitios para que el usuario pueda navegar por ellas usando solo el teclado (a través de atajos de teclado). En este tutorial de JavaScript aprenderemos como detectar cuando se presiona una tecla, identificar la tecla y acto seguido ejecutar una acción.
Algo que tenemos que tener en cuenta es que Javascript identifica a cada una de las teclas mediante códigos o keyCodes, por ejemplo la tecla ← se le identifica con el numero 37.
En la siguiente imagen podemos ver todas las teclas y sus respectivos keyCodes:
Mediante los eventos de jQuery podemos detectar cuando una tecla es presionada, guardar que tenga fue presionada, luego ejecutar una condición y dependiendo del resultado ejecutar una acción.
Podemos usar 2 eventos: KeyDown o KeyUp, cada uno con un comportamiento ligeramente diferente:
- KeyDown: detecta el momento exacto cuando una tecla es presionada.
- KeyUp: detecta cuando cualquier tecla deja de ser presionada.
Entonces KeyDown detecta el momento inicial cuando una tecla es presionada mientras que KeyUp solo cuando una tecla deja de ser presionada.
Ejemplo 1
En este ejemplo llamamos al evento keyDown y le pasamos el tecla, que guardara la tecla presionada, luego usamos esta variable para hacer una condición, preguntando si la tecla presionada fue ‘X’, si es así que ejecute un alert().
$(document).keydown(function (tecla) {
if (tecla.keyCode == 88) {
alert('Tecla X presionada');
}
});
Ejemplo 2
En este ejemplo un poco mas avanzado, tendremos 3 bloques y cuando se presionen las teclas A, S, D los bloques cambiaran de color respectivamente:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Key</title>
</head>
<style type="text/css"> .a, .s, .d{ padding: 50px; display: block; float: left; margin-right: 30px; background: gray; color: white; } </style>
<body>
<div class="a">A</div>
<div class="s">S</div>
<div class="d">D</div>
<script type="text/javascript" charset="utf-8">
$(document).keydown(function (tecla) {
if (tecla.keyCode == 88) {
alert('Tecla X presionada');
}
});
</script>
</body>
</html>
Estos son solo 2 de los muchos usos que le podemos dar, espero te haya servido este tutorial, si tienes alguna duda acerca del tutorial hazmelo saber en un comentario para poder ayudarte.