JavaScriptでKeyCodeイベントを取得しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

PCのキーボードを押下した時に発生するKeyCodeイベントをJavaScriptで取得します。

demoは、「こちら」で確認できます。「JavaScript Event KeyCodes」というサイトに似たものですね。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

開発

ページの作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

JavaScriptは、キーボードが押下された時に発生するイベントを「keyCodeイベント」として取得することができます。

そしてイベント取得後は、JavaScriptでKeyCodeをページに埋め込みます。

要素を取得する

JavaScriptで制御すべき要素が1つあります。最初にこの要素を取得しましょう。

keydownイベントの登録

続いてkeydownイベントを登録しましょう。このイベントは、ユーザーがブラウザ上でキーを押下した時に発生するイベントです。

ブラウザからイベントが取得できているか確認してみましょう。Chromeの場合には、「F12」でコンソールが開けます。

KeyboardEventが取得できていますね。

これらはプロパティになっているので、JavaScriptからアクセスすることが可能です。

テンプレートの作成

次に、KeyCodeを追加する領域のテンプレートを作成します。

テンプレートには、「バッククォート()」を使っています。これはテンプレートリテラルと呼ばれるもので、文字列の中にJavaScriptの式を組み込むことができます。

また、スペース(Space)キーを入力した場合、event.keyに「” “(空白)」が入るため、3項演算子を使って条件分岐をしています。

ページへ追加

最後に、KeyCodeをページに追加します。innertHTMLを使えば簡単です。

これで完成です。

おわりに

JavaScriptのKeyCodeイベントの取得は、現場でも実装したことがあります。ユーザーが特定の操作をした時に発生させたい処理がある場合、とても便利です。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す