Written by Kasumi

【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でキーボードで入力したキー値を取得する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptで参照先オブジェクトからthisが渡らない時の対処方法

2022.12.10
695
JavaScript

JavaScriptでオブジェクトに指定したプロパティが存在しているかすぐ確認する方法

2022.12.19
605
JavaScript

JavaScriptで配列とオブジェクトを比較。重複した値を持つ要素だけ取得する方法

2022.12.24
1256
JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
676