El método jQuery keyup() dispara el evento de teclado cuando cualquier botón del teclado es liberado
. Este método adjunta un elemento html a la función de manejo de eventos, esta función de manejo de eventos se ejecuta cuando se produce el evento de tecleo. Se puede pensar que es lo opuesto al evento de keydown.
Sintaxis del método jQuery keyup()
$("input").keyup(function(){ //este código se ejecuta cuando ocurre el evento keyup});
Aquí hemos adjuntado el campo de texto de entrada a la función del manejador de eventos usando el método keyup(), lo que significa que el evento keyup se disparará cuando se libere una tecla dentro del campo de texto de entrada
.
Ejemplo de jQuery keyup()
En el siguiente ejemplo estamos usando ambos métodos, keydown() y keyup(). Aquí tenemos dos funciones de manejador de eventos, la primera función de manejador de eventos se adjunta al texto de entrada usando el método keydown() y la segunda función de manejador de eventos se adjunta al campo de texto de entrada usando el método keyup
().
Aquí estamos cambiando el color de fondo del campo de texto de entrada a verde cuando ocurre el evento keydown y el color de fondo cambia a amarillo cuando ocurre el evento keyup. Vea las capturas de pantalla en la salida
.
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color", "green"); }); $("input").keyup(function(){ $("input").css("background-color", "amarillo"); });});</script></head><body><h2>jQuery keyup event example on Beginnersbook.com</h2>Escribir algo aquí: <tipo de entrada = "texto"><p>El color de fondo del campo de texto de entrada cambiará a verde, cuando presione una tecla dentro del campo de entrada y el color cambiará a amarillo cuando suelte la tecla dentro del campo de texto de entrada.</p></body></html>
Salida:
Antes de soltar una tecla:
Esta captura de pantalla se realiza cuando la página se carga en el navegador y no se realiza ninguna actividad en la página.
Después de que una tecla es presionada dentro del campo de entrada:
Esta captura de pantalla se toma después de que una tecla es presionada dentro del campo de entrada, Como pueden ver en la captura de pantalla, el color de fondo del campo se cambia a verde. Esta lógica de cambiar el color a verde está escrita dentro de la función del primer manejador de eventos que está asociada al campo de entrada usando el método keydown(). Este evento se dispara cuando se pulsa una tecla en el campo de entrada.
Después de que se libere una llave dentro del campo de entrada:
Esta captura de pantalla se toma después de que se suelta una tecla dentro del campo de texto de entrada, como se puede ver en la captura de pantalla, el color de fondo del campo se cambia a amarillo. Esta lógica de cambiar el color a amarillo se escribe dentro de la segunda función del manejador de eventos que se asocia al campo de entrada usando el método keyup(). Este evento se dispara cuando se libera una tecla dentro del campo de entrada.
❮ AnteriorSiguiente ❯
