jQuery キーアップ
jQuery の keyup() メソッドは、キーボードからキーが離されるたびに JavaScript の keyup イベントをトリガーします。このチュートリアルでは、jQuery で keyup() メソッドを使用する方法を示します。
jQuery Keyup
keyup() メソッドは、キーボードからキーが離されたときにキーアップイベントをトリガーします。このメソッドは、キーボードからキーが離されたかどうかを検出するために使用されます。
このメソッドの構文は次のとおりです。
$(selector).keyup(function)
ここで、selector は id、class、または element name であり、function はキーが押されたかどうかを判断するオプションのパラメーターです。このメソッドの戻り値は、キーが押されたかどうかです。
それに応じて背景色が変わります。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>
上記のコードは、キーを離すと入力フィールドの背景色を薄緑色に変更し、キーを押すと水色に変更します。出力を参照してください：
キーを離すたびに div の背景色を変更する別の例を試してみましょう。例を参照してください：
<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>
上記のコードの出力を参照してください。
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