jQuery keyup
El método keyup() en jQuery activa el evento keyup de JavaScript cada vez que se suelta una tecla del teclado. Este tutorial demuestra cómo usar el método keyup() en jQuery.
clave jQuery
El método keyup() activará el evento keyup cuando se suelte una tecla del teclado. El método se utiliza para detectar si se suelta alguna tecla del teclado.
La sintaxis de este método se encuentra a continuación.
$(selector).keyup(function)
Donde el selector puede ser el id, la clase o el nombre del elemento, y la función es un parámetro opcional que nos da una idea de si la tecla está pulsada o no. El valor de retorno de este método es si la tecla se presiona o no.
Cambiará el color de fondo de acuerdo con él. Probemos un ejemplo para el método keyup().
<!DOCTYPE html>
<html>
<head>
<title>jQuery keyup() Method</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "lightblue");
});
$("input").keyup(function(){
$("input").css("background-color", "lightgreen");
});
});
</script>
</head>
<body>
Type Something: <input type="text">
</body>
</html>
El código anterior cambiará el color de fondo del campo de entrada a verde claro cuando se suelta la tecla y a azul claro cuando se presiona la tecla. Ver salida:
Probemos con otro ejemplo que cambiará el color de fondo del div cada vez que se suelte la tecla. Ver ejemplo:
<html>
<head>
<title>jQuery keyup() Method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
div {
width: 700px;
height: 500px;
padding: 30px;
font-size: large;
text-align: center;
margin: auto;
font-weight: bold;
border: 5px solid cornflowerblue;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
<script>
var colors = ["lightblue", "lightgreen", "violet", "lightpink", "red", "forestgreen", "white", "indigo"];
var i = 0;
$(document).keyup(function(event) {
$("div").css("background-color", colors[i]);
i++;
i = i % 9;
});
</script>
<body>
<br />
<br />
<div>
<h1 style="color:teal; font-size:x-large; font-weight: bold;"> jQuery keyup event </h1>
<p style="color:maroon; font-size: large;">
Press and release the space or any other key <br /> The background of the div will change </p>
</div>
</body>
</html>
Vea la salida para el código anterior:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook