¡Aprende cómo hacer tus eventos de teclado más interactivos con jQuery! En este artículo te mostraremos todo lo que necesitas saber para implementar eventos de teclado en tu web utilizando esta herramienta. Descubre cómo mejorar la experiencia de tus usuarios con unos cuantos pasos sencillos. ¡En TIEnergía te lo contamos todo!
jQuery admite una variedad de eventos relacionados con el teclado. Los tres eventos clave relacionados son keydown, keypress y keyup. En este artículo, vamos a echar un vistazo más de cerca a estos eventos.
Sintaxis
$(selector).keydown(function)
$(selector).keypress(function)
$(selector).keyup(function)| Parámetro | Descripción |
|---|---|
function |
Especifica una función opcional para ejecutar |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-keyboard-events/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Keydown
El keydown El evento se activa cuando el usuario primero presiona una tecla en el teclado. Se puede adjuntar a cualquier elemento, pero el evento solo se envía al elemento que tiene el foco. Los elementos que pueden tener foco pueden variar entre navegadores.
Sin embargo, los elementos del formulario siempre pueden enfocarse, por lo que es probable que sean objetivo.
<script type="text/javascript">
var a = 0;
$("input").keydown(function(){
$("span").text(++a)
});
</script> pulsación de tecla
El keypress evento es similar al keydown evento, excepto en el caso de repeticiones de tecla. Si el usuario presiona y mantiene presionada una teclaa keydown el evento se activa una vez, pero por separado keypress los eventos se activan para cada carácter insertado.
Teclas modificadoras (como Shift, Alt, Ctrl) desencadenar keydown eventos pero no eventos de pulsación de tecla.
<script type="text/javascript">
var a = 0;
$("input").keydown(function(){
$("span").text(++a)
});
</script> Tecla Arriba
El keyup El evento se activa cuando el usuario suelta una tecla en el teclado. Se puede adjuntar a cualquier elemento, pero el evento solo se envía al elemento que tiene el foco.
<script type="text/javascript">
var a = 0;
$("input").keyup(function(){
$("span").text(++a)
});
</script> 