jQuery keyup() 方法

jQuery 事件keyup() 方法允許您將函式附加或繫結到 keyup 事件，該事件在釋放按鍵時發生。您也可以使用它來手動觸發元素上的 keyup 事件。此事件通常用於在釋放按鍵後檢索輸入欄位的值。

語法

以下是 jQuery 事件keyup() 方法的語法：

$(selector).keuup(function)

引數

此方法接受一個可選引數“函式”，如下所述：

函式 - 一個可選函式，在 keyup 事件發生時執行。

返回值

此方法不返回值，而是將函式附加到 keyup 事件。

示例 1

以下程式演示了 jQuery 事件keyup() 方法的用法：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Press any key and release to see an alert pop-up message..</p>
    <script>
        $(document).keyup(function(){
            alert("You relaesed pressed key");
        });
    </script>
</body>
</html>

輸出

上述程式在使用者按下任何鍵並釋放時顯示一條訊息，瀏覽器螢幕上將出現一個警報彈出訊息：

當用戶釋放已按下的鍵時：

示例 2

以下是 jQuery 事件keyup() 方法的另一個示例。在這裡，我們使用此方法和輸入欄位來同時檢索輸入值，無論何時使用者開始向輸入欄位輸入值：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Enter any name in the below input field</p>
    <input type="text" placeholder="Your name">
    <p id="result"></p>
    <script>
        $('input').keyup(function(){
            let data = $(this).val();
            document.getElementById("result").innerHTML = data;
        });
    </script>
</body>
</html>

輸出

程式執行後，將顯示一個輸入欄位。每當使用者開始鍵入內容時，輸入的資料將同時顯示在瀏覽器螢幕上：

當用戶開始向欄位中輸入值時：

示例 3

在下面的示例中，我們宣告一個包含8種不同顏色的陣列。每當觸發keyup() 事件時，就會從該陣列中為 div 元素分配一種顏色。當用戶按下並釋放任何鍵時，div 元素的背景顏色將相應更改：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        border: 2px solid black;
    }
</style>
<body>
    <p>Press any key and release to toggle the below div background-color</p>
    <div>

    </div>
<script>
    let colors = ['red', 'blue', 'green', 'grey', 'black', 'white', 'teal', 'yellow'];
    let i = 0;
    $(document).keyup(function(event) {
        $('div').css('background-color', colors[i]);
        i++;
        i = i % colors.length;
});
</script>
</body>
</html>

輸出

執行上述程式後，將顯示一個帶有黑色邊框的框。每當使用者按下並釋放任何鍵時，顯示框的背景顏色每次都會更改：

jquery_ref_events.htm

列印頁面