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.
