[Edit]

JavaScript - detect when arrow key was pressed

1 contributors

2 contributions

0 discussions

6 points

Created by:

Wiktor-Sribiew

830

In this article, we would like to show you how to detect when the arrow key was pressed using JavaScript.

The main idea of how to detect the arrow key is to check the key code when the key event occurred.

Key codes:

Key name	Key code (`event.key`, `event.code`)	Deprecated key code (`event.keyCode`)
Left arrow	`ArrowLeft`	`37`
Up arrow	`ArrowUp`	`38`
Right arrow	`ArrowRight`	`39`
Down arrow	`ArrowDown`	`40`

Practical example

Edit

In the below example, we use some legacy function that lets to get key code. The main reason why that approach was used, is the time when event.key and key.code were introduced in the major web browsers (around 2016-2017). To see the result, each arrows key is handled and displayed a message in the console.

Example 1:

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div>Click here to get focus and press arrow keys.</div>
  <script>
​
    var MAPPING = {
        37: 'ArrowLeft',
        38: 'ArrowUp',
        39: 'ArrowRight',
        40: 'ArrowDown',
    };
    
    function getKey(event) {
        return event.key || MAPPING[event.keyCode]; // with legacy support
    }
    
    document.addEventListener('keydown', function(event) {
        var key = getKey(event);
        switch (key) {
            case 'ArrowLeft':
                console.log('Arrow left pressed.');
                break;
            case 'ArrowUp':
                console.log('Arrow up pressed.');
                break;
            case 'ArrowRight':
                console.log('Arrow right pressed.');
                break;
            case 'ArrowDown':
                console.log('Arrow down pressed.');
                break;
        }
    });
​
  </script>
</body>
</html>

Auto running

Example 2:

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div>Click here to get focus and press arrow keys.</div>
  <script>
​
    var MAPPING = {
        37: 'ArrowLeft',
        38: 'ArrowUp',
        39: 'ArrowRight',
        40: 'ArrowDown',
    };
    
    function getCode(event) {
        return event.code || MAPPING[event.keyCode]; // with legacy support
    }
    
    document.addEventListener('keydown', function(event) {
        var code = getCode(event);
        switch (code) {
            case 'ArrowLeft':
                console.log('Arrow left pressed.');
                break;
            case 'ArrowUp':
                console.log('Arrow up pressed.');
                break;
            case 'ArrowRight':
                console.log('Arrow right pressed.');
                break;
            case 'ArrowDown':
                console.log('Arrow down pressed.');
                break;
        }
    });
​
  </script>
</body>
</html>