jQuery keyboard events example

jQuery comes with three keyboard events to capture the keyboard activities – keyup(), keydown() and keypress().

  1. keyup() – Fire when user releases a key on the keyboard.
  2. keydown() – Fire when user presses a key on the keyboard.
  3. keypress() – Fire when user presses a key on the keyboard.

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

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

2. Modifier keys

Keyboard modifier keys (ctrl, shift, alt…) will fire keydown() event but not keypress() event.

3. KeyCode – ASCII code

For example, A = 65 and a= 97, Please refer to this ASCII table charts.

  1. keydown() and keyup() will display a = 65, A = 65 (case insensitive – lowercase and uppercase will display same value).
  2. keypresss() will display a= 97, A=65 (case sensitive – lowercase and uppercase will display different value).

If you want to capture the real character key in, go for keypress() event.

KeyCode is not display in FireFox?

The event.keyCode is not working in FireFox , but work perfect in IE. To get the event.keyCode in Firefox, you should use the event.which instead, and jQuery recommend it as well. So the better way should be

var keycode = (event.keyCode ? event.keyCode : event.which);

Try it yourself

<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
	span{
		padding:8px;
		margin:8px;
		color:blue;
	}
	div{
		padding:8px;
		margin:8px;
	}
</style>
 
</head>
<body>
  <h1>jQuery keyup(), keydown() and 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>
 
<script type="text/javascript">
 
$('#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)
});
 
</script>
</body>
</html>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

  • Pingback: water ionizer loan()

  • Pingback: alkaline water benefits()

  • Pingback: laan penge online()

  • Pingback: water ionizer()

  • Pingback: laan penge online()

  • Pingback: stop parking()

  • Pingback: mobile porn movies()

  • Pingback: stop parking()

  • Pingback: Business DIRECTV()

  • Pingback: DIRECTV()

  • Pingback: tv packages()

  • Pingback: online casinos()

  • Pingback: gloving()

  • Pingback: Blocked Sited in Dubai 2015()

  • Pingback: kangen water machine()

  • Pingback: kangen water machine()

  • Pingback: best bottled water()

  • Pingback: water ionizer()

  • Pingback: tv online, online tv()

  • Pingback: free movie downloads()

  • Pingback: watch tv show episodes()

  • Pingback: watch movies online()

  • Pingback: how to increase leptin()

  • Pingback: Blue Coaster33()

  • Amar

    Hi.This was good.But the keyup,keypress,keydown events are not firing when accessing in tablet browser.But the events was firing for backspace key.These events was not working for alphanumeric key on tablet screen.Anybody can help me!

  • Major

    So here’s a question:

    Using Internet Explorer, why does the keyup event fire for the print screen button *ONLY AFTER* another keyboard event has been detected?

    You can hit print screen all you want, no detection, hit another key, now print screen is detected.

    And faked (javascript generated) keyboard events don’t count for this, either.

  • Anshuman

    All Your Tutorials are great !

    I see the method keydown and keypress both are triggering itself until you released the key contrary to what you said in “Repeat keys” . So I dont think this is a valid difference .Im trying Chrome by the way .

    I tried the below code as a test . Please let me know if you think otherwise .

    var keydown=1;
    $(‘#textbox’).keydown(function(event){
    $(‘#msg-keydown’).html(‘keydown() is triggered! Count :’+keydown++ +’ , keyCode = ‘
    + event.keyCode + ‘ which = ‘ + event.which)
    });

    var keypress=1;
    $(‘#textbox’).keypress(function(event){
    $(‘#msg-keypress’).html(‘keypress() is triggered! Count :’+keypress++ +’ , keyCode = ‘
    + event.keyCode + ‘ which = ‘ + event.which)
    });

  • Vince Canete

    Thank you! XD , Very big help for my project.

  • maryam

    how can write a sorce that click a textbox and atomatic change keyboard language or system language

  • sk

    Hello,
    How can i trigger the PrtScn i.e, PrintScreen[Code:44] keyboard event through some jQuery function and then save that captured image to server ?

    function ErrorLog(errorCode, errorMessage) {
     
        // Here i want the screenshot of the user's screen where the error have occurred ...
        var _screenShot = &quot;&quot;;
     
        SendErrorToServer(errorCode, errorMessage, _screenShot);
    }
  • kiran

    very nice ,Thanq

  • http://marianbucur.com/ Marian Bucur

    Very helpful, thank you ! :)

  • Pingback: handling keyboard event using JQuery | Jeetendra Chauhan()