HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM KeyboardEventのkeyプロパティとは？押されたキーを判定する方法を解説

HTML DOM の KeyboardEvent オブジェクトが持つ key プロパティは、ユーザーが押したキーに対応する「キー識別子」を文字列として返します。このプロパティを活用することで、どのキーが入力されたのかを簡単に判別でき、フォームのバリデーションやショートカット機能の実装などに役立ちます。

基本情報

  • 対象イベント： keydown / keyup / keypress などのキーボードイベント
  • 戻り値： 押されたキーに対応する文字列（例：「a」「Enter」「Shift」など）
  • 読み取り専用： 値の設定はできません

構文

最後に入力されたキーの識別子を返す構文は以下のとおりです。

event.key

サンプルコード

ここでは、テキストフィールドに入力されたキーが「B」かどうかを判定するクイズ形式の例を見てみましょう。正解なら「Correct Answer（正解です）」、小文字の「b」ならCaps Lockのヒントを表示し、それ以外の場合は再挑戦を促すメッセージを出力します。

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent key</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-key</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function getEventData(InputEvent) {
        if(InputEvent.key === 'B')
            divDisplay.textContent = 'Correct Answer';
        else if(InputEvent.key === 'b')
            divDisplay.textContent = 'Close call, you might have caps lock turned off';
        else
            divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
        textSelect.textContent = '';
    }
</script>
</body>
</html>

コードのポイント

input要素には onkeypress="getEventData(event)" を指定しており、キーが押されるたびに関数が呼び出されます。関数内では InputEvent.key の値を比較することで、大文字の「B」・小文字の「b」・その他のキーを判別しています。

実行結果

このコードを実行すると、以下のような動作になります。

テキストフィールドに何も入力していない状態

プレースホルダー「__ for Ball」というヒントだけが表示されています。

HTML DOM KeyboardEventのkeyプロパティとは？押されたキーを判定する方法を解説

「b」（小文字）を入力した場合

Caps Lockがオフになっている可能性を示唆するメッセージが表示されます。

HTML DOM KeyboardEventのkeyプロパティとは？押されたキーを判定する方法を解説

「B」（大文字）を入力した場合

「Correct Answer（正解）」というメッセージが表示されます。

HTML DOM KeyboardEventのkeyプロパティとは？押されたキーを判定する方法を解説

まとめ

KeyboardEvent の key プロパティを使えば、押されたキーの種類を文字列として手軽に取得できます。大文字・小文字の区別も可能なので、入力チェックやインタラクティブなUIの実装において非常に便利なプロパティです。ぜひ実際の開発でも活用してみてください。

  1. HTML DOM offsetLeftプロパティとは？使い方をサンプルコード付きで解説

    HTML DOM offsetLeftプロパティとは HTML DOMのoffsetLeftプロパティは、指定した要素の左端が親要素の左側からどのくらいの位置にあるかを表す数値を返します。戻り値はピクセル（px）単位の整数値です。 このプロパティは、要素の配置計算やドラッグ＆ドロップ機能の実装など、正確な位置情報が必要となる場面で非常に役立ちます。 構文 構文は以下の通りです。 HTMLelement.offsetLeft offsetLeftが返す値には、次のものが含まれます。 指定した要素自体の左位置とマージン（margin） 親要素の左パディング（padding）、スクロールバー、ボー

  2. HTML DOM Video textTracksプロパティの使い方をわかりやすく解説

    HTML DOM の Video textTracks プロパティは、<video> 要素に関連付けられたテキストトラック（字幕やキャプションなど）の情報を格納した TextTrackList オブジェクトを返します。このプロパティを利用すると、JavaScript から動画に設定された字幕トラックの総数やラベル、言語などの情報を簡単に取得できます。 構文 textTracks プロパティの基本的な構文は以下の通りです。 mediaObject.textTracks 戻り値は TextTrackList オブジェクトであり、length プロパティでトラックの総数を取得したり、イン