jQuery キーアップ

Sheeraz Gul 2024年2月15日
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>

上記のコードは、キーを離すと入力フィールドの背景色を薄緑色に変更し、キーを押すと水色に変更します。出力を参照してください:

jQuery キーアップメソッド

キーを離すたびに 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>

上記のコードの出力を参照してください。

jQuery キーアップメソッドの背景

著者: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

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

関連記事 - jQuery Function