jQuery: Assign Action to Keyboard Keys (Keyboard Event)
Tip by Stefan Trost | Last update on 2023-01-30 | Created on 2013-02-26
In this tutorial, I show you how to respond to a key press of a user on your website using jQuery. For example, every time, when a specific key is pressed, a different action should be executed. We first take a look at how we can react to letter keys, then how we can also evaluate the pressing of special keys such as the arrow keys.
To realize this keyboard event, you can use the following code skeleton:
$(document).ready(function() { $(document).keydown(function(event) { var key = String.fromCharCode(event.keyCode); key.toUpperCase(); switch(key) { case 'A': alert('Key A'); break; case 'B': alert('Key B'); break; case 'C': alert('Key C'); break; } }); });
Because we want to catch the keyboard inputs of our whole website, we use $(document).keydown(). Instead of "document", you can also use any other jQuery selector, for example to respond only to the inputs within a defined text box.
After that, we catch the code of the key with event.KeyCode and we convert this code to a string using the function String.fromCharCode().
If we do not want to distinguish between upper and lower case characters, we can make sure with toUpperCase() in the next line, that also pressing "a" triggers the event for the uppercase "A". If we do not want this, we can simply delete this line from the code.
Now, the key pressed, is stored in the variable "key". After that, we can run different actions depending on the key using a simple switch statement. In our example, we are showing a message box with alert(), but you can write their any code you want.
Note: Problems may occur with this solution when trying to catch umlauts or special characters, but as long as you relay on the normal ANSI Alphabet (A to Z, 0 to 9 and so on), it should work without any problems.
React to Special Keys
The first example demonstrated how we can react to the pressing of letter keys. But what if we want to react to the arrow keys, the Enter key, the ESC button or the space bar? Here is an example:
$(document).ready(function() { $(document).keydown(function(event) { switch(event.which) { case 37: alert('Arrow Key Left'); break; case 38: alert('Arrow Key Up'); break; case 39: alert('Arrow Key Right'); break; case 40: alert('Arrow Key Down'); break; case 13: alert('Enter Key'); break; case 27: alert('ESC Button'); break; case 32: alert('Space Bar'); break; default: return; } e.preventDefault(); }); });
This time we do not convert the keycode into its character equivalent but evaluate the keycodes directly. Each button has a different key code so that we can simply react to it. In our example, we show a different message, depending on which key was pressed.
So that the default action of the respective key is not executed additionally (such as navigating on the page using the arrow keys) we call e.preventDefault() at the end of the event handler. The default condition "return" for all other keys that we have not assigned our own treatment ensures that e.preventDefault() only applies to the treated keys.
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
Fonts for Windows, Linux and Mac on the Web
Article | 0 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
Delphi/Lazarus: Is the ALT, SHIFT or CTRL key pressed?
Tutorial | 0 Comments
XAMPP: How to set up SSL/HTTPS for local Projects
Tutorial | 4 Comments
Delphi: System-Wide HotKey
Tutorial | 1 Comment
The Secure Password
Info | 0 Comments
Windows Batch Script: Computer Shutdown
Tutorial | 2 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.