Search code examples
javascriptjqueryhtmlloopskeyboard

Vanilla JavaScript: Disable all key combos whatsoever in an entire website

Sometimes when you use websites, they contain one or more keyboard combos or ("keyboard shortcuts") like Alt+Shift+S or CTRL+Shift+D that are, by some view, unique to that website (or one or more webpages in that website).

A good broad example would be the different key combos you get when you are in the edit-page of a random user-page in Wikipedia (standing with the mouse on an option will usually display the link's description describing its key combo).

Possible problem

Sometimes a website's set of key combos can clash with these of a given operating system (or even cause editorial mistakes if a combo was used in a rare mistake).

My question

Is there a "violent" (and vanillic) JavaScript way to disable all preexisting keycombos whatsoever in an entire website? Not just one or two preexisting (specific) key combos but all of them, in one go?

Maybe some kind of for loop that will do that?

I could run this code in some browser script-executor like Greasemonkey or Tampermonkey.

Why I ask this question:

I ask this question after yet finding "satisfying" answers in this question and this question that I personally asked, and contains all sorts of codes I've tried so far.

Important note:

Generally I don't think anyone should do this (and surly not forcing it on others) as it decreases Web Accessibility of web applications in general; the problem I described is rare and deals with a personal issue I have.

Solution

  • I think I'd try blocking the event listeners by the method described here.

    window.addEventListener("keydown",  function (e) { e.stopPropagation(); }, true);
window.addEventListener("keyup",    function (e) { e.stopPropagation(); }, true);
window.addEventListener("keypress", function (e) { e.stopPropagation(); }, true);

    This would stop all listeners watching for any key presses. If that's too broad, you could add some logic to only stopPropagation if modifier keys are being held, e.g.

    if (e.ctrlKey) {
  e.stopPropagation();
}

    Edit:

    The above code works on the page I used for testing but not on your wikipedia talk page because the wiki page isn't actually using event listeners, but rather the accesskey attribute. In this case, removing the attribute will remove the keyboard shortcut:

    document.querySelectorAll("[accesskey]").forEach(function(el) {
  el.removeAttribute('accesskey');
});