在 GreaseMonkey/TamperMonkey 上使用 JavaScript 将箭头键重新映射到另一个键

Question

我正在尝试设置 TamperMonkey 脚本以将 Right Arrow 键重新分配给 F 键。

我试过这段代码，但到目前为止，当我按下 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);
})();

请问有没有人能给我讲讲？

Answer 1

您需要在整个 document 或通过 document.querySelector、document.getElementById 等的特定元素上使用 the KeyboardEvent constructor and then run dispatchEvent

运行下面的代码片段可以看到实际效果。

（顺便说一句，using KeyboardEvent.keyCode is depricated in favor of KeyboardEvent.key。为了向后兼容，它仍然适用于主要的网络浏览器，但在标准中已被正式弃用）

（如果您想运行自定义 DOM 元素上的键盘事件，请确保您的 TamperMonkey 脚本运行正在 document-end 运行）

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,
            });

            // 
            // 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>

但是，无法禁止 f 在该网站上执行其他操作。如果你想这样做，你可以安装 AutoHotKey (Wikipedia Link)，用这一行创建一个 AutoHotKey 脚本：

f::^Right

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

当你启动这个AHK脚本时，AHK会拦截（大部分）程序之前的按键事件并修改它。

Answer 2

正如@samathingamajig 所解决的，我刚刚将此脚本设置为键 A 解释 Left Arrow，以及 D 解释 Right Arrow.

在我的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);
        }
    });
})();

在 GreaseMonkey/TamperMonkey 上使用 JavaScript 将箭头键重新映射到另一个键

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

javascript

tampermonkey

greasemonkey-4