jQuery: Assign Action to Keyboard Keys (Keyboard Event)

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.