こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
PCのキーボードを押下した時に発生するKeyCodeイベントをJavaScriptで取得します。
demoは、「こちら」で確認できます。「JavaScript Event KeyCodes」というサイトに似たものですね。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
開発
ページの作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Event KeyCodes</title> </head> <body> <div id="insert"> <div class="key"> Press any key to get the keyCode </div> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイルの追加
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #e1e1e1; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; text-align: center; height: 100vh; overflow: hidden; margin: 0; } .key { border: 1px solid #999; background-color: #eee; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); display: inline-flex; align-items: center; font-size: 20px; font-weight: bold; padding: 20px; flex-direction: column; margin: 10px; min-width: 150px; position: relative; } .key small { position: absolute; top: -24px; left: 0; text-align: center; width: 100%; color: #555; font-size: 14px; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
JavaScriptは、キーボードが押下された時に発生するイベントを「keyCodeイベント」として取得することができます。
そしてイベント取得後は、JavaScriptでKeyCodeをページに埋め込みます。
要素を取得する
JavaScriptで制御すべき要素が1つあります。最初にこの要素を取得しましょう。
|
1 2 |
// 要素の取得 const insert = document.getElementById('insert') |
keydownイベントの登録
続いてkeydownイベントを登録しましょう。このイベントは、ユーザーがブラウザ上でキーを押下した時に発生するイベントです。
|
1 2 3 4 |
// keydownイベントを登録 window.addEventListener('keydown', (event) => { console.log(event) }) |
ブラウザからイベントが取得できているか確認してみましょう。Chromeの場合には、「F12」でコンソールが開けます。
KeyboardEventが取得できていますね。
|
1 2 3 4 5 6 7 8 9 |
// KeyboardEventのプロパティ { ... code: "KeyD" ... key: "d" keyCode: 68 ... } |
これらはプロパティになっているので、JavaScriptからアクセスすることが可能です。
テンプレートの作成
次に、KeyCodeを追加する領域のテンプレートを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
window.addEventListener('keydown', (event) => { // KeyCodeーを挿入するテンプレートを作成 const template = ` <div class="key"> ${event.key === ' ' ? 'Space' : event.key} <small>event.key</small> </div> <div class="key"> ${event.keyCode} <small>event.keyCode</small> </div> <div class="key"> ${event.code} <small>event.code</small> </div> ` }) |
テンプレートには、「バッククォート()」を使っています。これはテンプレートリテラルと呼ばれるもので、文字列の中にJavaScriptの式を組み込むことができます。
また、スペース(Space)キーを入力した場合、event.keyに「” “(空白)」が入るため、3項演算子を使って条件分岐をしています。
ページへ追加
最後に、KeyCodeをページに追加します。innertHTMLを使えば簡単です。
|
1 2 3 4 5 6 7 8 |
// keydownイベントを登録 window.addEventListener('keydown', (event) => { // KeyCodeーを挿入するテンプレートを作成 ... // insert領域に追加 insert.innerHTML = template }) |
これで完成です。
おわりに
JavaScriptのKeyCodeイベントの取得は、現場でも実装したことがあります。ユーザーが特定の操作をした時に発生させたい処理がある場合、とても便利です。
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 要素の取得 const insert = document.getElementById('insert') // keydownイベントを登録 window.addEventListener('keydown', (event) => { // KeyCodeーを挿入するテンプレートを作成 const template = ` <div class="key"> ${event.key === ' ' ? 'Space' : event.key} <small>event.key</small> </div> <div class="key"> ${event.keyCode} <small>event.keyCode</small> </div> <div class="key"> ${event.code} <small>event.code</small> </div> ` // insert領域に追加 insert.innerHTML = template }) |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。