HOWTO · jQuery
jQuery キーアップ
このチュートリアルでは、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>
上記のコードの出力を参照してください。
