jQuery keyboard events example
jQuery comes with three keyboard events to capture the keyboard activities – keyup(), keydown() and keypress().
- keyup() – Fire when user releases a key on the keyboard.
- keydown() – Fire when user presses a key on the keyboard.
- 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.
- keydown() and keyup() will display a = 65, A = 65 (case insensitive – lowercase and uppercase will display same value).
- 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>
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!
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.
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)
});
Thank you! XD , Very big help for my project.
how can write a sorce that click a textbox and atomatic change keyboard language or system language
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 ?
very nice ,Thanq
Very helpful, thank you ! 🙂