jQuery Event keydown() Method

The jQuery event keydown() method is used to attach or bind an event handler to the keydown event, which is triggered whenever any key on the keyboard is pressed.

Syntax

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

$(selector).keydown(function)

Parameters

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

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

Return Value

The method does not have a return value.

Example 1

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Press the down key on your laptop or computer keyboard.</p>
    <script>
        $(document).keydown(function(event){
            alert("You pressed downkey on your keyboard.");
        });
    </script>
</body>
</html>

Output

After executing the program, whenever the user presses any key on their system keyboard, an alert pop-up message will appear on the browser screen −

When the user presses any key in the system keyboard −

Example 2

The following example demonstrates the use of the jQuery keydown() method. This method is used to bind an event handler to the keydown event of an input element. When the user begins to type in the input field, the keydown event is triggered, and the text entered will be displayed in "red" within 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>Write something in the below input field and press any key.</p>
    <input type="text" placeholder="Your name">
    <script>
        $('input').keydown(function(){
            $(this).css("color", "red");
        });
    </script>
</body>
</html>

Output

After executing the program, an input field will be displayed. When the user begins to type anything into the field, the text will appear in red within the input field −

When a user enters something in the input fields −

Example 3

Form validation using the jQuery keydown() method

Let’s demonstrate the real-time application of the jQuery keydown() method. We will create a form with two input fields. The keydown() event will be triggered whenever the user begins typing in either input field.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        display: block;
        margin: 10px 0px;
        padding: 10px;
        width: 200px;
    }
</style>
</head>
<body>
    <p>Write something in the below input field </p>
    <form>
        <input type="text" placeholder="Username" id="uname">
        <input type="password" placeholder="Password" id='psw'>
    </form>
    <script>
        $('input').keydown(function(){
            let uname = $('#uname').val();
            let password = $('#psw').val();
            if(uname.length == 5 | password.length  == 8){
                $(this).css("background-color", "green");
            }
            else{
                $(this).css("background-color", "red");
            }
        });
    </script>
</body>
</html>

Output

After executing the program, a form with two input fields is displayed. If the length of the values in either input field is not equal to 5 or 8, the background color of that input field will displayed as red; otherwise, it will change to green −

If the entered inputs do not satisfy the given conditions −

If the entered inputs are correct and satisfy the given conditions −

jquery_ref_events.htm

Print Page