jQuery Event keuup() Method

The jQuery event keyup() method allows you to attach or bind a function to the keyup event, which occurs when a key is released. You can also use it to manually trigger the keyup event on an element. This event is often used to retrieve the input field's value after a key has been released.

Syntax

Following is the syntax of the jQuery event keuup() method −

$(selector).keuup(function)

Parameters

This method accepts an optional parameter as 'function', which is described below −

function − An optional function executes when the keyup event occurs.

Return Value

This method does not return any value, instead, it attaches a function to the keyup event.

Example 1

The following program demonstrates the usage of the jQuery event keuup() method −

<!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>

Output

The above program displays a message when the user presses any key and releases an alert pop-up message will be appear on your browser screen −

When user releases the alredy pressed key −

Example 2

The following is another example of the jQuery event keuup() method. Here, we use this method with an input field to retrieve the input value at the same time, whenever the user starts entering values to the input field −

<!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>

Output

After executing the program, an input field will be displayed. Whenever the user starts typing something, the entered data will be displayed on the browser screen simultaneously −

When the user starts entering an input value into the field −

Example 3

In the example below, we declare an array containing 8 different colors. Whenever the keuup() event is triggered, a color from this array is assigned to a div element. When the user presses and releases any key, the background color of the div element will change accordingly −

<!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>

Output

Once the above program is executed, a box will be displayed with black border. Whenever the user presses and releases any key, the background color of the displayed box will change each time −

jquery_ref_events.htm

Print Page