In this article we will learn how JQuery keydown, Keypress and Keyup events work.
- Keydown Event bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.
- Keypress Event bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
- Keyup Event bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.
This events are very similar and you will find very minor difference between them. To understand difference between Keydown, Keypress and Keyup event is sequence in which they triggers.
- First Keydown Event occurs (Triggers as soon as key is press)
- Second Keypress Event occurs (Triggers when key character is typed)
- Third Keyup Event occurs (Triggers when key is up, after it is been pressed)
Example 1 - Keydown Event: We will show alert in all situation whenever user press any key in textbox. (
Live Demo)
I have a html input control, whose id is "txtInput" on writing any character inside textbox it should display alert.
<b>Type anything in below textbox to trigger, keydown event</b><br />
<input id="txtInput" type="text" />
JQuery script for showing alert on keydown event
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#txtInput").keydown(
function (event) {
if (event.keyCode == 13) {
alert("You have pressed enter");
}
else if (event.keyCode == 18) {
alert("You have pressed Alt key");
}
else if (event.keyCode == 32) {
alert("You have pressed Spacebar key");
}
else if (event.keyCode == 27) {
alert("You have pressed Escape key");
}
else if (event.keyCode >= 48 && event.keyCode <= 57) {
alert("You have pressed numeric key");
}
else if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122)) {
alert("You have pressed alphabet key");
}
else {
alert("You have pressed: " + event.keyCode);
}
}
);
});
</script>
Example 2 - Keypress Event: We will show alert in all situation whenever user press any key in textbox. (
Live Demo)
In above example you might have notice problem with
event.keyCode, it triggers as soon as we press the key. That is we cannot used this event when we want to check combination of key (Example: shift + 2 .i.e. "@" symbol is pressed or not) For such situation were we want to identify which character is pressed, it is good to use
event.which event. Let understand that with example
I have a html input control, whose id is "txtInput" on writing any character inside textbox it should display alert.
<b>Type anything in below textbox to trigger, keydown event</b><br />
<input id="txtInput" type="text" />
JQuery script for showing alert on keypress event
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#txtInput").keypress(
function (event) {
if (event.which == 64) {
alert("You have pressed @ sign");
}
else if (event.which == 35) {
alert("You have pressed # sign");
}
else if (event.which == 36) {
alert("You have pressed $ sign");
}
else if (event.which == 42) {
alert("You have pressed * sign");
}
else if (event.which >= 65 && event.which <= 90) {
alert("You have pressed uppercase alphabet character");
}
else if (event.which >= 97 && event.which <= 122) {
alert("You have pressed lowercase alphabet character");
}
}
);
});
</script>
Example 3 - Keyup Event: We will show alert in all situation whenever user press any key in textbox. (
Live Demo)
I have a html input control, whose id is "txtInput", when user releases key on keyboard this event will trigger and it should display alert.
<b>Type anything in below textbox to trigger, keydown event</b><br />
<input id="txtInput" type="text" />
JQuery script for showing alert on keyup event
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#txtInput").keyup(
function (event) {
if (event.keyCode == 13) {
alert("You have pressed enter");
}
else if (event.keyCode == 18) {
alert("You have pressed Alt key");
}
else if (event.keyCode == 32) {
alert("You have pressed Spacebar key");
}
else if (event.keyCode == 27) {
alert("You have pressed Escape key");
}
else if (event.keyCode >= 48 && event.keyCode <= 57) {
alert("You have pressed numeric key");
}
else if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122)) {
alert("You have pressed alphabet key");
}
else {
alert("You have pressed: " + event.keyCode);
}
}
);
});
</script>
I will be discussing more JQuery examples in JQuery example series.
