jQuery keyup
Die Methode keyup() in jQuery löst das Keyup-Event von JavaScript aus, sobald eine Taste von der Tastatur losgelassen wird. Dieses Tutorial demonstriert die Verwendung der Methode keyup() in jQuery.
jQuery-Keyup
Die Methode keyup() löst das keyup-Ereignis aus, wenn eine Taste von der Tastatur losgelassen wird. Das Verfahren wird verwendet, um zu erkennen, ob eine Taste von der Tastatur losgelassen wird.
Die Syntax für diese Methode ist unten.
$(selector).keyup(function)
Wobei der selector die ID, die Klasse oder der Elementname sein kann und die function ein optionaler Parameter ist, der uns eine Vorstellung davon gibt, ob die Taste gedrückt ist oder nicht. Der Rückgabewert dieser Methode ist, ob die Taste gedrückt ist oder nicht.
Es ändert die Hintergrundfarbe entsprechend. Versuchen wir ein Beispiel für die Methode 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>
Der obige Code ändert die Hintergrundfarbe des Eingabefelds auf hellgrün, wenn die Taste losgelassen wird, und auf hellblau, wenn die Taste gedrückt wird. Siehe Ausgabe:
Versuchen wir ein anderes Beispiel, das die Hintergrundfarbe des div jedes Mal ändert, wenn die Taste losgelassen wird. Siehe Beispiel:
<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>
Siehe die Ausgabe für Code oben:
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