javascript 矢印キーの入力を取得する
- 作成日 2023.01.06
- javascript
- javascript

javascriptで、矢印キーの入力を取得するサンプルコードを記述してます。「keyCode」を使用する方法と「code」を使用する方法があります。「code」を使用したほうが直感的にわかりやすいと思います。
環境
- OS windows11 home
- ブラウザ chrome 108.0.5359.99
矢印キーの入力を取得
「矢印」キーの「keyCode」は、それぞれ以下となっているのでで、これを使用することで取得することが可能です。
左方向 : 37
上方向 : 38
右方向 : 39
下方向 : 40
document.addEventListener('keydown', function(event) {
switch (e.keyCode) {
case 37:
console.log('left');
break;
case 38:
console.log('up');
break;
case 39:
console.log('right');
break;
case 40:
console.log('down');
break;
}
});
実行結果をみると取得されていることが確認できます。

配列を使用すれば、少し簡潔に記述することも可能です。
document.addEventListener('keydown', (e) => {
let arr= ['left', 'up', 'right', 'down'];
if(e.keyCode && e.keyCode>36 && e.keyCode<41) alert(arr[e.keyCode-37]);
});
code
また、以下のように「e.code」から「code」を使用して取得することも可能です。
document.addEventListener('keydown', function(e) {
switch (e.code) {
case "ArrowLeft":
alert('left');
break;
case "ArrowUp":
alert('up');
break;
case "ArrowRight":
alert('right');
break;
case "ArrowDown":
alert('down');
break;
}
});
macの場合も同じに取得可能です。(ブラウザはsafariになります)

WASDキー
「WASDキー」も取得刷る場合は、以下のように「ラベル」を追加します。
document.addEventListener('keydown', function(e) {
switch (e.code) {
case "ArrowLeft":
case "KeyA":
alert('left');
break;
case "ArrowUp":
case "KeyW":
alert('up');
break;
case "ArrowRight":
case "KeyD":
alert('right');
break;
case "ArrowDown":
case "KeyS":
alert('down');
break;
}
});
サンプルコード
以下は、
矢印キーが押された時だけの押されたキーが何かを判定して結果を表示する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container text-center w-50" style="margin-top:200px">
<h2><span id="result" class="badge bg-info">結果</span></h2>
</div>
<script>
const checkKey = (e) => {
switch (e.code) {
case "ArrowLeft":
result.textContent = 'left';
break;
case "ArrowUp":
result.textContent = 'up';
break;
case "ArrowRight":
result.textContent = 'right';
break;
case "ArrowDown":
result.textContent = 'down';
break;
}
}
document.onkeydown = checkKey;
</script>
</body>
</html>
結果が表示されていることが確認できます。

-
前の記事
kotlin webで実行する 2023.01.06
-
次の記事
PostgreSQL 指定した区切り文字で配列を作成する 2023.01.06
コメントを書く