[Edit]

JavaScript - event on Ctrl+a or cmd+a keys pressed

1 contributors

2 contributions

0 discussions

12 points

Created by:

Ela-Davey

663

In this short article, we would like to show how to handle Ctrl+a keys pressed event on Windows, Linux or Unix or cmd+a keys pressed on MacOS.

There is not available direct event that lets us to detect Ctrl+a or cmd+a keys, but if we are able to check pressed keys, it is simple to detect the action.

Quick solution:

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    [tabindex] {
        outline: none;  /* only to disable outline on focusable elements */
    }
​
</style>
<script>
  
    function isApple() {
        var expression = /(Mac|iPhone|iPod|iPad)/i;
        return expression.test(navigator.platform);
    }
​
    function isControl(event) { // Returns true if Ctrl or cmd keys were pressed.
        if (isApple()) {
            return event.metaKey;
        }
        return event.ctrlKey; // Windows, Linux, UNIX
    }
​
    function isSelecting(event) { // Returns true if Ctrl+a or cmd+a were pressed (all text selection).
        if (isControl(event)) {
            return event.key === 'a';
        }
        return false;
    }
​
</script>
</head>
<body>
  <div id="my-element" tabindex="0">
    Click on this text and press Ctrl+a or cmd+a keys.
  </div>
  <script>
    
    var element = document.querySelector('#my-element');
    
    element.addEventListener('keydown', function(event) {
        if (isSelecting(event)) {
            console.log('Ctrl+a or cmd+a keys pressed!');
        }
    });
    
  </script>
</body>
</html>