HOWTO · jQuery
jQuery keyup
Dieses Tutorial zeigt, wie Keyup-Ereignisse in jQuery verwendet werden.
Auf dieser Seite
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:
