jQuery keyup() keydown() keypress() with Example

Hello artisan, in this article, I’m going to discuss about jQuery keyup, keydown and keypress events with example. Let’s get started:

Table of Contents

  1. keyup()
  2. keydown()
  3. keypress()

keyup()

The keyup() event specifies that the key is released.

<!DOCTYPE html>
<html>
<head>
    <title>keyup()</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script>
    $(document).ready(function(){
        $("input").keyup(function(){
            alert( "Handler for .keyup() called." );
        });
    });
    </script>
</head>
<body>
    Type Something: <input type="text">
</body>
</html>

keydown()

The keydown() event specifies that the key is pressed down.

<!DOCTYPE html>
<html>
<head>
    <title>keydown()</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script>
    $(document).ready(function(){
        $("input").keydown(function(){
            alert( "Handler for .keydown() called." );
        });
    });
    </script>
</head>
<body>
    Type Something: <input type="text">
</body>
</html>

keypress()

The keypress() event specifies that the key is pressed down. It is  similar to keydown() event.

<!DOCTYPE html>
<html>
<head>
    <title>keypress()</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script>
    $(document).ready(function(){
        $("input").keypress(function(){
            alert( "Handler for .keypress() called." );
        });
    });
    </script>
</head>
<body>
    Type Something: <input type="text">
</body>
</html>

That’s all. Thanks for reading.


Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.