Remap arrow keys to another keys with JavaScript on GreaseMonkey/TamperMonkey

Question

I'm trying to set up a TamperMonkey script to reassign the Right Arrow key to F key.

I tried this code, but so far, nothing happens when I press F.

    (function(){
document.addEventListener('keydown', function(e) {
 // pressed F
  if (e.keyCode == 70 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  keyCode == 39 // this should trigger the right arrow
  }
}, false);
})();

Can someone enlighten me on this, please?

A couple of things... 1) `keyCode` isn't defined there, i think you mean `e.keyCode`, 2) `==` doesn't modify the value of a variable, `=` can (but not in this case because...) 3) `e.keyCode` is a readonly property and you can't modify it. You might be able to use this: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent — Samathingamajig, Jun 16 '21 at 04:32
@Samathingamajig, thanks. I've tried a few different combinations from the page you indicated, but nothing worked. Can you specify what I should put beside "// this should trigger the right arrow" for it actually to trigger the right arrow? I'm not a dev, and I'm just trying to fix the system I use to work, using a few JavaScript frameworks. I've already achieved to assign keys to some virtual buttons, but this one I'm since a week already, trying alternatives of code, and nothing works. I really appreciate any help you can provide. — oppala, Jun 17 '21 at 14:09

score 1 · Accepted Answer · answered Jun 18 '21 at 22:34

You'll want to use the KeyboardEvent constructor and then run dispatchEvent on either the entire document or a specific element via document.querySelector, document.getElementById, etc.

Run the snippet below to see this in action.

(BTW, using KeyboardEvent.keyCode is depricated in favor of KeyboardEvent.key. It still works in major web browsers for backwards compatibility, but it's been officially deprecated in the standards)

(Also make sure your TamperMonkey script is running at document-end if you're wanting to run the keyboard event on a custom DOM element)

window.addEventListener('keydown', (e) => {
    if (e.key == 'ArrowRight') console.log('right arrow pressed');
});

// Your TamperMonkey script starts here
(() => {
    window.addEventListener('keydown', (e) => {
        if (e.key == 'f' && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
            console.log('f pressed');

            // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
            const keyboardEvent = new KeyboardEvent('keydown', {
                key: 'ArrowRight',
                keyCode: 39,
                bubbles: true,
                cancelable: true,
                shiftKey: false,
                ctrlKey: false,
                altKey: false,
                metaKey: false,
            });

            // https://stackoverflow.com/a/44190874/12101554
            // replace `document` with a specific element if you want to do a specific
            document.dispatchEvent(keyboardEvent);
        }
    });
})();

<p>
  press right arrow &amp; f key to see things happen
</p>
<button onclick="document.querySelector('.as-console').innerHTML = ''">clear console</button>

However, there isn't a way to disable f from doing other things on that website. If you want to do this, you can install AutoHotKey (Wikipedia Link), create an AutoHotKey script with this one line:

f::^Right

https://www.autohotkey.com/docs/misc/Remap.htm#Remap

When you start this AHK script, AHK will intercept the key event before (most) programs and modify it.

You absolutely solved my problem @samathingamajig! I've just deleted the console.log from the script, set one for A as Left Arrow and D as Right Arrow, now I'm fully in control of what I should do, without taking the right hand from the mouse. I'm looking to have both hands only on the keyboard since the mouse hurts my wrist and elbow. You are a master, man! Thank you so much! — oppala, Jun 19 '21 at 04:54

oppala · Answer 2 · 2021-06-19T17:19:54.090

As solved by @samathingamajig, I've just set this script to key A interpret Left Arrow, and D to interpret Right Arrow.

It end up like this in my TamperMonkey:

// MEDIA TO THE RIGHT - ASSIGNED TO *D* KEY
(() => {
    window.addEventListener('keydown', (e) => {
        if (e.key == 'd' && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
            ;

            const keyboardEvent = new KeyboardEvent('keydown', {
                key: 'ArrowRight',
                keyCode: 39,
                bubbles: true,
                cancelable: true,
                shiftKey: false,
                ctrlKey: false,
                altKey: false,
                metaKey: false,
            });

            document.dispatchEvent(keyboardEvent);
        }
    });
})();


// MEDIA TO THE LEFT - ASSIGNED TO *A* KEY
(() => {
    window.addEventListener('keydown', (e) => {
        if (e.key == 'a' && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
            ;

            const keyboardEvent = new KeyboardEvent('keydown', {
                key: 'ArrowLeft',
                keyCode: 39,
                bubbles: true,
                cancelable: true,
                shiftKey: false,
                ctrlKey: false,
                altKey: false,
                metaKey: false,
            });

            document.dispatchEvent(keyboardEvent);
        }
    });
})();

Remap arrow keys to another keys with JavaScript on GreaseMonkey/TamperMonkey

2 Answers2