JavaScriptのKeyイベント

event.key の場合、値は文字であり、言語によって異なります。訪問者が OS で複数の言語をもち、切り替えた場合、同じキーで異なる文字になります。したがって、常に同じである event.code をチェックするのが理にかなっています。

code:javascript

function 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"

);

https://gyazo.com/5956d8754ac12adc83df829464b99ad9