keydownとkeypress
概要
修飾キーでkeypressイベントが出ない場合がある
再現コード
code: keytest.html
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('keydown', (event) => {
var keyName = event.key;
if (event.ctrlKey) {
console.log(keydown:Ctrl + ${keyName});
} else if (event.shiftKey) {
console.log(keydown:Shift + ${keyName});
} else {
console.log(keydown:${keyName});
}
});
document.addEventListener('keypress', (event) => {
var keyName = event.key;
if (event.ctrlKey) {
console.log(keypress:Ctrl + ${keyName});
} else if (event.shiftKey) {
console.log(keypress:Shift + ${keyName});
} else {
console.log(keypress:${keyName});
}
});
</script>
</head>
<body>
</body>
</html>
結果
Shift+C, Ctrl+C, Alt+Cを順に押すと下記のようになった。
Ctrl, Altでkeypressイベントが出ていないことが分かる。
https://gyazo.com/dbeb7c548e85c5cde3f7560daa070629
検討
通常は文字値を生成するキーが押されました。このイベントはデバイス依存度が高く、時代遅れのものです。使用すべきではありません。
keypressは使わないほうが良いらしい
了解 増井俊之.icon
参考