投稿
プログラム上で、何かキーが入力されたか事を知りたかった！！！
keydownのイベントが広範囲で取得できるので、今回はこれが一番！
addEventListener
キーイベントは、
keydown,keypress,keyup
があります。
ポイント
-----------------------------------------------------------------------------
document.addEventListener('keydown', (event) => {
var keyName = event.key;
console.log(`keydown:${keyName}`);
});
-----------------------------------------------------------------------------
コーディング
---------------------------------------------------------------
<!DOCTYPE html><html> <head>
<script>
document.addEventListener('keydown', (event) => {
var keyName = event.key; console.log(`keydown:${keyName}`); if( keyName=="Shift") console.log("SHT") if( keyName=="Escape") console.log("*ESC") }); </script>
</head> <body> </body></html>
---------------------------------------------------------------結果
---------------------------------------------------------------
new.html?1569104105087:8 keydown:ArrowUp
new.html?1569104105087:8 keydown:ArrowDown
new.html?1569104105087:8 keydown:Shift
new.html?1569104105087:10 SHT
new.html?1569104105087:8 keydown:Escape
new.html?1569104105087:11 *ESC
---------------------------------------------------------------
リンク元
https://techacademy.jp/magazine/19613
ソース
<!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>
結果
new.html?1569103019592:13 keydown:F12
new.html?1569103019592:13 keydown:j
new.html?1569103019592:25 keypress:j
new.html?1569103019592:13 keydown:k
new.html?1569103019592:25 keypress:k
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowUp
4new.html?1569103019592:13 keydown:ArrowLeft
2new.html?1569103019592:11 keydown:Shift + Shift
3new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:13 keydown:f
new.html?1569103019592:25 keypress:f
18new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:13 keydown:ArrowUp
2new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:13 keydown:
new.html?1569103019592:25 keypress:
new.html?1569103019592:13 keydown:ArrowUp
2new.html?1569103019592:13 keydown:ArrowDown
2new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowLeft
3new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:ArrowLeft
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:ArrowDown
new.html?1569103019592:9 keydown:Ctrl + Control
new.html?1569103019592:11 keydown:Shift + Shift
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:Tab
new.html?1569103019592:13 keydown:q
new.html?1569103019592:25 keypress:q
new.html?1569103019592:13 keydown:Escape
new.html?1569103019592:13 keydown:v
new.html?1569103019592:25 keypress:v
new.html?1569103019592:13 keydown:b
new.html?1569103019592:25 keypress:b
2new.html?1569103019592:13 keydown:Escape
new.html?1569103019592:13 keydown:Tab
new.html?1569103019592:13 keydown:Escape
2new.html?1569103019592:13 keydown:Tab
2new.html?1569103019592:13 keydown:Alt
new.html?1569103019592:13 keydown:Zenkaku
new.html?1569103019592:13 keydown:NonConvert
new.html?1569103019592:13 keydown:Hiragana
new.html?1569103019592:13 keydown:Convert
2new.html?1569103019592:11 keydown:Shift + Shift
new.html?1569103019592:13 keydown:ArrowUp
new.html?1569103019592:13 keydown:p
new.html?1569103019592:25 keypress:p
new.html?1569103019592:13 keydown:ArrowRight
new.html?1569103019592:13 keydown:Tab