keydownとkeypress
概要
修飾キーでkeypressイベントが出ない場合がある
再現コード
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イベントが出ていないことが分かる。
検討
> 通常は文字値を生成するキーが押されました。このイベントはデバイス依存度が高く、時代遅れのものです。使用すべきではありません。
keypressは使わないほうが良いらしい
了解 
参考