How To Use keypress Method In JQuery With Examples

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In jQuery keypress() Method triggers the keypress event when any button on the keyboard is pressed down. This method doesn’t consider keys such as ALT, CTRL, SHIFT, ESC.

How To Use keypress Method In JQuery With Examples


Step 1:Create index.html file and implement below code.
 

Write anything here: <input type = "text">
<h2>The current characters count in the textbox is: <span id="message">0</span></h2>

 
Step 2:Implement jQuery to Keypress() methods.

 

<script>
    count = 0;
    $(document).ready(function(){
        $("input").keypress(function(){
            $("#message").text(count = count+1);
        });
    });
</script>


Complete Code For Using Keypress() Method In JQuery 
 

<!DOCTYPE html>
<html>
<head>
    <title>How To Use keypress Method In JQuery With Examples</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Use keypress Method In JQuery </h1>
    </div>
    <br>

    <div class="well">
        Write anything here: <input type="text">
        <h2>The current characters count in the textbox is: <span id="message">0</span></h2>
    </div>

</div>
</body>
</html>
<script>
    count = 0;
    $(document).ready(function () {
        $("input").keypress(function () {
            $("#message").text(count = count + 1);
        });
    });
</script>

 

Related Post