JavaScriptのKeyイベント
JavaScriptでKeyイベントを扱うための関連情報
KeyboardEvent: https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent
keydown イベント（キーが押された時に発生）: https://developer.mozilla.org/ja/docs/Web/API/Document/keydown_event keyup イベント（キーが離された時に発生）: https://developer.mozilla.org/ja/docs/Web/API/Document/keyup_event event.key の場合、値は文字であり、言語によって異なります。訪問者が OS で複数の言語をもち、切り替えた場合、同じキーで異なる文字になります。したがって、常に同じである event.code をチェックするのが理にかなっています。 キーの組合せ入力を実現: https://ja.javascript.info/keyboard-events#ref-1598
javascriptfunction runOnKeys(func, ...codes) {
let pressed = new Set();
document.addEventListener('keydown', function(event) {
pressed.add(event.code);
for (let code of codes) { // are all keys in the set?
if (!pressed.has(code)) {
return;
}
}
// yes, they are
// during the alert, if the visitor releases the keys,
// JavaScript does not get the "keyup" event
// and pressed set will keep assuming that the key is pressed
// so, to evade "sticky" keys, we reset the status
// if the user wants to run the hotkey again - let him press all keys again
pressed.clear();
func();
});
document.addEventListener('keyup', function(event) {
pressed.delete(event.code);
});
}
runOnKeys(
() => alert("Hello!"),
"KeyQ",
"KeyW"
);