Get ALT Keyboard Shortcuts Working Quickly With JavaScript

  • infoFull Post Details
    info_outlineClick for Full Post Details
    Date Posted:
    Apr. 28, 2020
    Last Updated:
    Apr. 28, 2020
  • classTags
    classClick for Tags

I was trying to use a web app today, and ran into an interesting issue. It uses ALT + Left Arrow Key as a shortcut for a very handy operation, one that I would like to use frequently. However, at least on Windows, that keyboard shortcut gets stolen by the browser, and navigates me back a page. How do I work around this?

Well, there are multiple solutions. This post is meant as a quick notes session as I explore them, so for more depth solutions, please do your own research.

For the Designer of the Web App

If I was the creator of the web app, there would be a very simple solution. You can simply use the event.preventDefault() call inside an eventListener callback, to prevent the default browser action. For example, if I wanted to prevent the backward page navigation and do something else, I could use this code:

document.addEventListener('keydown',(evt) => {
    if (evt.keyCode === 37 && evt.altKey) {
        // Stop browser action
        evt.preventDefault();
        // Do something here
        console.log('ALT + Left Arrow Pressed');
        // ...
    }
});

You can actually this type of code to override any browser keyboard shortcut – for example, if you wanted to override F5 to have it do something else instead of refreshing the current page.

The only thing you really cannot override is Operating-System level keyboard hooks, such as CTRL+ALT+DEL on Windows.

For more details on event.preventDefault(), see the MDN doc page.

For myself, as a user of the app

Since I’m not the creator the app, if I wanted to fix this myself I would either need to make a pull-request to the codebase (assuming it is open source), or implement a local workaround. I’m going to explore the second option now, since it will also be faster for a temporary workaround.

Injecting Code

As a user of the web app, although I can’t touch the source code, I can inject whatever JavaScript I want into the page through the developer’s console, browser extension, bookmarklet, or other method, and there is not much the app can do to prevent that.

Assuming that the app I’m using is a SPA (Single Page Application), then a simple bookmarklet should do the job, since the JS environment is not reset between actions (as opposed to a regular web site, where actions usually cause a full page refresh). I’ll write a little JavaScript that calls preventDefault() on all alt key combinations, and wrap it up in a bookmarklet. In fact, here is that code and bookmarklet:

Code:

document.addEventListener('keydown', (evt) => {
    if (evt.altKey) {
        evt.preventDefault();
    }
});

Bookmarklet – Drag the below link to your bookmarks: ALT preventDefault


Exceptions:

As already mentioned, there are exceptions to the ability to prevent keyboard presses from triggering browser or OS level events (for example, CTRL + ALT + WIN on Windows).

Another issue is that the implementation of keyboard events and their propagation is some what left up to the browser. For example, my above code will successfully block ALT keyboard combos on both Chrome and Firefox, but for a single ALT keypress, it will only block the menu from opening on Chrome, and not on Firefox. However, this might be a bug rather than a specific choice – see this bug tracker.

Leave a Reply

Your email address will not be published. Required fields are marked *