logo
Published on

JavaScriptでショートカットキーで要素をクリック

Authors

JavaScriptでショートカットキーで要素をクリックする方法についてメモです。 "addEventListener('keyup'"メソッドと、eventのe.keyCodeおよびe.ctrlKeyを使用します。

以下コードでは、例としてw3schools.comでRUN(スクリプトの実行)をJavascriptを使ってショートカットキーで実行することをします。

ctrl+Enterでコードのセーブ＋実行ができたらいいなぁと思っていて。

function doc_keyUp(e) {
    if (e.ctrlKey && e.keyCode == 13) {
                document.querySelector('body > div.trytopnav > div > button').click()
    }
}
document.addEventListener('keyup', doc_keyUp, false);

こちらのURLなどででも試してみてください。

tampermonkey

// ==UserScript==
// @name         ctrl+Enter equivalent to click "Run"
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       https://yuis-programming.com
// @match        https://www.w3schools.com/*
// @grant        none
// ==/UserScript==


function doc_keyUp(e) {
    if (e.ctrlKey && e.keyCode == 13) {
                document.querySelector('body > div.trytopnav > div > button').click()
    }
}
document.addEventListener('keyup', doc_keyUp, false);

カスタムショートカットキーの実装は初めてだったので少し戸惑いましたが、なんとか。

参考: