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>

About the Author

author image
mkyong
Founder of Mkyong.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

Leave a Reply

avatar
newest oldest most voted
Amar
Guest
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
Guest
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
Guest
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 =… Read more »
Vince Canete
Guest
Vince Canete

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

maryam
Guest
maryam

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

sk
Guest
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 = "";
    
    SendErrorToServer(errorCode, errorMessage, _screenShot);
}

kiran
Guest
kiran

very nice ,Thanq

Marian Bucur
Guest
Marian Bucur

Very helpful, thank you ! :)

trackback
handling keyboard event using JQuery | Jeetendra Chauhan

[…] keyboard event visit this link Share this:TwitterFacebookLike this:LikeBe the first to like this […]