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

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などででも試してみてください。

• [Tryit Editor v3.5](https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right)

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

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

参考:

- [Javascript Char Codes (Key Codes) - Cambia Research](https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes)
- [scripting - How can I add a JavaScript keyboard shortcut to an existing JavaScript Function? - Stack Overflow](https://stackoverflow.com/questions/2511388/how-can-i-add-a-javascript-keyboard-shortcut-to-an-existing-javascript-function)