Keyboard Events

By: Rajesh P.S.

KeyboardEvent objects encapsulate user interactions with the keyboard, detailing a specific interaction with a key. The event type (keydown, keypress, or keyup) signifies the type of keyboard activity, and jQuery differentiates events based on character or physical keys. It's worth noting that keyboard events might not trigger when users input text through alternate methods like tablet handwriting or graphics tablets.

The main keyboard events you need to understand are:

keydown
keypress
keyup

keydown event

The keydown event is initiated the moment a user begins pressing a key, and it doesn't necessitate the keypress to be completed for activation. In fact, if the user holds down a key, the keydown event can fire repeatedly in many instances.

Continue Reading...

$("input").on('keydown', function(){ $(this).css('background-color', 'pink'); alert("Keydown event fired !!"); });

Browser View

Full Source

<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 usually activated when a keyboard key is in the process of being pressed down. Using the keypress() method, you can link an event handler that triggers when the key is being pressed down, invoking the keypress event. However, when modifier keys like shift, ctrl, or alt are pressed, the event won't be triggered. These modifier keys generate a keydown event but not a keypress event.

$("input").keypress(function(){ $(this).css('background-color', 'pink'); alert("Keypress event fired !!") });

Browser View

Full Source

<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 keyup event, triggered by the keyup() method in jQuery, activates when the user releases a key. Notably, this event won't occur until the key is actually released. This stands in contrast to keydown and keypress events which continue to fire as long as a key is held down. The keyup event will only fire once the key is released.

$("input").keyup(function(){ $(this).css('background-color', 'pink'); alert("keyup event fired !!") });

Browser View

Full Source

<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 effectively combines event.keyCode and event.charCode, providing a normalized approach for accessing keyboard key input. For detecting which key was pressed, it's advisable to use event.which. Here's a basic jQuery code example utilizing the keypress() event to determine the pressed key:

$(document).ready(function() { $(document).keypress(function(event) { var keyPressed = event.which; console.log("Key pressed: " + keyPressed); }); });

In this code, the keypress event is being monitored on the entire document. When a key is pressed, the event.which property is used to identify the specific key that was pressed, and it's logged to the console.

Listen for the enter key

In ASCII, the "Enter" key is represented by the code "13". To determine if the "Enter" key has been pressed within a textbox, you can bind the keypress() event to the textbox and then check the event.which property.

$(document).ready(function() { $("#textbox").keypress(function(event) { if (event.which === 13) { console.log("Enter key pressed!"); // Perform any action you want when the Enter key is pressed } }); });

In this code, we're binding the keypress event to an element with the ID "textbox". When a key is pressed within the textbox, the event handler checks if the key's event.which property is equal to 13, indicating that the "Enter" key was pressed. If so, a message is logged to the console, and you can perform any desired action.

Conclusion

jQuery provides keyboard events such as keydown, keypress, and keyup to interact with user keyboard inputs. The event.which property helps access normalized key codes, making it convenient to identify pressed keys. Binding these events to elements enables tracking keyboard interactions, allowing for specific actions based on key presses, like detecting the "Enter" key within a textbox.

Next > jQuery Form Events

Related Topics