【JavaScript】キーボードで入力したキー値を取得する方法
JavaScriptを使ってキーボードで入力したキー値を取得。
HTMLに出力したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
JavaScript 入力したキーを取得する by Kohei (@kouk05)
on CodePen.0
codenpenを使った実装サンプルです。
codepen上の画面をクリック。
キーを入力すると…
入力されたキー値を検知。
入力したキーがpタグに出力されてます。
実装方法は以下の通りです。
入力したキーを取得する
// キーの出力先
const target = document.querySelector('p');
// キーを検知
document.addEventListener('keydown', e => {
target.textContent += e.key;
});
入力したキーを取得するコード例です。
キーを取得するにはaddEventListenerを使います。
第一引数にkeydownを指定。
第二引数にコールバック関数を定義。
コールバック関数の引数を任意で設定します。（本記事ではe）
e.keyでキーボードで打ったキー値が取れます。
textContent等を使って任意のHTMLタグにe.keyを出力。
ブラウザで確認。
キーボードで打ったキー値が表示されたら実装完了です。
まとめ
JavaScriptでキーボードで入力したキー値を取得する方法について紹介しました。
以上で解説を終わります。
目次