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

Published on Aug 08, 2020

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

Comments (0)