Keyboard Events
KeyboardEvent objects describe a user interaction with the keyboard ; each event describes a single interaction between the user and a key on the keyboard. The event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred. When a user presses a key, jQuery determines which event to raise based on whether the keyboard message specifies a character key or a physical key . It is important to note that, keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet.The main keyboard events you need to understand are:
- keydown
- keypress
- keyup
keydown event
The keydown event is triggered as soon as a user presses a key down. This event doesn't require the user to finish the keypress in order to be triggered. In fact, in many cases, if the user holds down the key, the keydown event will be triggered continuously.
$("input").on('keydown', function(){
$(this).css('background-color', 'pink');
alert("Keydown event fired !!");
});
<input type="text" size="30"/>
Browser View
<html>
<head>
<title>jQuery Events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").on('keydown', function(){
$(this).css('background-color', 'pink');
alert("Keydown event fired !!");
});
});
</script>
</head>
<body>
<input type="text" value="Press any key..." size="30"/>
</body>
</html>
keypress event
The keypress event is normally triggered when a key on the keyboard is being pressed down. The method keypress() attaches an event handler which is triggered when the key is being pressed down, or triggers the keypress event. When modifier keys are pressed (shift, ctrl, alt, etc.), the event will not fire. The modifier keys cause a keydown event , but not a keypress event.
$("input").keypress(function(){
$(this).css('background-color', 'pink');
alert("Keypress event fired !!")
});
<input type="text" size="30"/>
Browser View
<html>
<head>
<title>jQuery Events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keypress(function(){
$(this).css('background-color', 'yellow');
alert("Keypress event fired !!")
});
});
</script>
</head>
<body>
<input type="text" value="Press any key..." size="30"/>
</body>
</html>
keyup event
The jQuery method of keyup() corresponds the keyup event, it is triggered when the user releases an key. It will not fire until the key is released. The difference between this one and the others (keypress and keydown) is that when a key is held down, this event will not fire until the key is released. The other keyboard events (keydown and keypress ) continue to fire as long as the key is held down.
$("input").keyup(function(){
$(this).css('background-color', 'pink');
alert("keyup event fired !!")
});
<input type="text" size="30"/>
Browser View
<html>
<head>
<title>jQuery Events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keyup(function(){
$(this).css('background-color', 'red');
alert("keyup event fired !!")
});
});
</script>
</head>
<body>
<input type="text" value="Press any key..." size="30"/>
</body>
</html>
Determine which key was pressed
The event.which property normalizes event.keyCode and event.charCode . It is recommended to watch event.which for keyboard key input. So, below is simple jQuery code to determine or find out which key was pressed. We are using keypress() event of jQuery to detect which key was pressed.
$(document).on('keypress', function(e){
alert(e.which);
});
<input type="text" size="30"/>
Listen for the enter key
The enter key is represent by code "13" in ASCII. To check if an "enter" key is pressed inside a textbox, just bind the keypress() to the textbox.
$(document).on('keypress', function(e){
if (e.which == 13) {
alert("Enter key pressed!");
}
});
<input type="text" size="30"/>
Related Topics