Users can interact with web pages using mouse and keyboard. Keyboard activities can be like entering some text in text boxes, pressing tab keys to move to next elements, erase text in an editable control etc. All such activities done by users can be controlled with the help of jQuery Keyboard Events like keypress, keydown and keyup. In this post you will understand the working of these events and related methods.
Note: all the jQuery Keyboard Events will be fired with elements where keyboard activity can be done. It means in HTML elements where user can enter some text, number, backspace to delete the text and other such keyboard things.
Keypress
Keypress event is fired when user presses the key to type something. The keypress event can be bound with this JavaScript method accepts event as argument, which represents the action taken by the user with the keyboard. In short you can access the key pressed by the user and specify the action according to the key pressed.
Keypress method represents the .on( “keypress”, handler ) when used with event and event function handler. When keypress method is called without arguments it is equivalent to .trigger( “keypress” ).
When keypress is called with only handler function it will work for any key pressed.
Code
<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#txt" ).keypress(function() {
alert( "keypress event handler function called" );
});
});
</script>
</head>
<body>
<input type="text" id="txt" value="start">
</body>
</HTML>When keypress is called with event data and handler function, you can define how the web page behaves with a specific key pressed. In the example below an expression is entered in the text box. When enter key is pressed the eval function evaluates the expression displaying calculate value in the alert box.
Code
<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txt").keypress(function(event){
if ( event.which == 13 ) {
alert(eval($("#txt").val()));
}
});
});
</script>
</head>
<body>
<input type="text" id="txt" value="start"> Enter an arithmetic expression and press enter to understand keypress
</body>
</HTML>Keydown
Keypress event is fired when user presses down the key to type something. The method can be called with handler function or handler function and event data.
Keyup
Keyup event is fired when user releases the key after pressing it down to type something. Just like keydown event this also can be called with handler function or handler function and event data.
Code for keydown and keyup events
Check this code and press key in text box. Pressing down and releasing keys change the color of the textboxes.
<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#txt" ).keydown(function() {
$(this).css("background-color","#C45F76");
});
$( "#txt" ).keyup(function() {
$(this).css("background-color","#DBE7E7");
});
});
</script>
</head>
<body>
<input type="text" id="txt" value="start">
</body>
</HTML>jQuery Keyboard Events can be very useful when you need to associate changing appearance of a page or initiate some activity with keyboard. Read here for more details.
Be First to Comment