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

Published on August 8, 2020 1 min read

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. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Follow Buy me a coffeeBuy me a coffee

Leave a Reply

Your email address will not be published. Required fields are marked *