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.
Podrias completarlo un poco mas.. Por ejemplo como usarlos, lo que se puede hacer,etc
Se puede hacer esto, mira las flechitas.
Disculpa quise ocupar el codigo que mencionas pero no me funciona para el Enter me marca 13, me podrias explicar el por que sucede. de antemano gracias
Lo he hecho funcionar aqui http://jsbin.com/agaxod/, para ver el codigo http://jsbin.com/agaxod/edit
una consula tengo un problema al usar una funcion en jquery
if( $(‘#gra’).val() == «1» ){
$(‘#gra’).autotab({ target: ‘cmeva’, format: ‘numeric’ });
$(‘#cmeva’).autotab({ previous: ‘gra’ });
}});
q es esta funcion hace q se haga un autoenter donde se especifica a donde va ir despues de ir a un campo determinado lo que yo quiero hacer es q evalue el valor si presione 2 o 3 q se valla un campo determinado pero si escribio 4 o 5 q se valla a otro campo-xp
No conozco la función autotab, se trata de un plugin o algo asi?
es una libreria q tengo jquery
$(document).ready(function() {
$(‘#sin’).autotab({ target: ‘jus’, format: ‘numeric’ });
$(‘#jus’).autotab({ previous: ‘sin’ });
});
lo que quiero hacer es que evalue el numero y use una funcion de autotab se puede o puede haber conflicto con la libreria q uso
hay una manera q se evalue el numero y use la funciona asignda en javascript o jquery
disculpa por mi incistencia pero quiero saber si hay una manera de q si en un campo de texto se llega escribir un valor 3 o 1 quisiera q se activara una funcion en javascript
No lo probe pero me será muy util! gracias
No me funciona con la tecla ENTER (10) que es la que necesito.. alguien me ayuda??
Prueba con 13.
Se puede hacer combinaciones de teclas con control ?.
Control es 17, combinalo en la condicion con un &&.
Una consulta cuando guardo un valor en javascript mediante var el elemento de queda hay, como puedo eliminarlo para poder usar de nuevo la funciones
delete nombre_variable
como seria shift + tab y que se active una funcion
Checa http://stackoverflow.com/questions/5707758/javascript-cant-capture-shifttab-combination
Buenas tardes,
En una pagina tengo 2 frames en uno cargo un listado de nombres de clientes en una tabla, lo que deseo realizar es poderme desplazar por las celdas de la tabla con las teclas direccionales y que quede resaltado con un color la celda donde este ubicado adicional a esto cuando realice el cambio de celda se cargue en el otro frame (una pag. nueva) información personal del cliente sleccionado en el momento.
Quedo atento a su pronta respuesta, gracias por la atención prestada.
Este plugin te puede servir http://www.sprymedia.co.uk/article/KeyTable
como hago para que al presionar cualquier tecla en un caja de texto me presione enter?, estoy haciendo un buscador y quiero mientras vaya presionando cualquier tecla ya vaya buscando por letra, como el buscador de google
Gracias por la información, me has ayudado.