Main Tutorials

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 Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
8 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Amar
10 years ago

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
10 years ago

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
10 years ago

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
11 years ago

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

maryam
11 years ago

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

sk
11 years ago

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
11 years ago

very nice ,Thanq

Marian Bucur
11 years ago

Very helpful, thank you ! 🙂