JavaScript キーボードイベント

キーボードイベントは、ユーザーがキーボードのキーを押す、またはキーを離すなどのアクションを行うと発生します。JavaScriptでは、これらのキーボードイベントを検知して特定の動作を行うことが可能です。

キーボードイベント

JavaScriptでの主要なキーボードイベントは２つがあります。

1. keydown：キーボードのキーが押されると発生するイベントです。このイベントは、キーが押され続けている間、繰り返し発生します。
2. keyup：キーボードのキーが離されると発生するイベントです。

これらのイベントは、addEventListenerメソッドを使用してHTML要素に関連付けることができます。

応用例

<p>キーボードのキーを押してください</>
<div id="output"></div>
<script>
document.body.addEventListener('keydown', function(e) {
  let output = document.getElementById('output');
  output.innerHTML = e.key + ' が押されました。 ';
});

</script>

キーボードのキーを押してください

詳しく説明します。

1. <p>キーボードのキーを押してください</p>：これはウェブページ上に表示されるテキストで、ユーザーにキーボードのキーを押すように指示します。
2. <div id="output"></div>：これは押されたキーの情報を表示するための空の div 要素です。この要素の ID は “output” となっています。
3. document.body.addEventListener('keydown', function(e) {...});：これは keydown イベントリスナーをドキュメントの body 要素に追加するコードです。このイベントリスナーは、キーボードのキーが押されるたびに発火します。
4. let output = document.getElementById('output');：この行は、”output” ID を持つ div 要素を取得し、その参照を output 変数に格納します。
5. output.innerHTML = e.key + ' が押されました。';：この行は、押されたキーの情報を output 要素の innerHTML プロパティに設定します。これにより、押されたキーの情報がページ上に表示されます。