The today over lesson is about JQuery Keyboard Events You Should Know How It Work!, I hope this lesson is uesful for you.

jQuery comes with three keyboard events to capture the beyboard activities-

keyup(), keydown() and keypress().

  • keyup() – Fire when user releases a key an the keyboard.
  • keydown() – Fire when user presses a key on the keyboard.
  • keypress() – Fire when user presses a key on the keyboard.

In general statmetn, the keydown() is similar to keypress() events. Actually there are quite few differential between keydown() and keypress events.

Things You Should Keep In Mind

  • Repeat keys:
    • If you are press and hold a key, keydown() event is triggered once, but the keypress() event will keep triggering itself until you released the key.
  • Modifier keys:
    • Keyboard modifier key (ctrl, shift, alt…) will fire keydown() event but not keypress() event.
  • KeyCod – ASCII code:
    • keydown() and keyup() will display a = 65, A = 65 (case insensitive – lowercase and uppercase will display different value).
    • If you want to capture the real character key in, go for keypress() event.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src=webapp.js></script>
<style type="text/css">
    span{
        padding:8px;
        margin:8px;
        color:bule;
    }
    div{
        padding:8px;
        margin:8px;
    }
</style>
</head>

<body>
    <h1>jQuery keyup(), keydown() nad keypress() example</h1>   
<label>TextBox : </label>
<input id="textbox" type="text" size="50" />

<div>
<label>1. keyup() Message :</label> <span id="msg-keyup"></span>
</div>

<div>
<label>2. keydown() Message :</label><span id="msg-keydown"></span>
</div>

<div>
<label>3. keypress() Message :</label><span id="msg-keypress"></span>
</div>

</body>
</html>

jQuery Code

$('#textbox).keyup(function(event)){
    $('#msg-keyup').html('keyup() is triggered!, keyCode = '
    + event.keyCode + ' which = ' + event.which)
});

$('#textbox).keydown(function(event)){
    $('#msg-keydown').html('keydown() is triggered!, keyCode = '
    + event.keyCode + ' which = ' + event.which)
});

$('#textbox).keypress(function(event)){
    $('#msg-keypress').html('keypress() is triggered!, keyCode = '
    + event.keyCode + ' which = ' + event.which)
});

If you want to run the jQuery code you need the Node.js application for computer. You can dowload for this site https://nodejs.org/en/download/

I hope this lesson is be useful for you. Always be successful, and do not lose hope.

We hope to get rid of this corona virus as soon as possible #Stay At Home