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

HTML DOM KeyboardEventのkeyCodeプロパティとは？使い方をサンプル付きで解説

KeyboardEventのkeyCodeプロパティは、イベント発生時に押されたキーに対応するUnicode文字コードを返します。

注意： 現在、keyCodeは非推奨（Deprecated）となっています。正確な結果を得るためには、keyプロパティの使用が推奨されます。ただし、レガシーコードの保守などでは今もよく使われるため、動作を理解しておくことは重要です。

構文

keyCodeを取得する基本的な構文は以下の通りです。

直近で入力された文字のkeyCodeを返す場合 −

event.keyCode

サンプルコード

それでは、KeyboardEventのkeyCodeプロパティを使った具体的な例を見てみましょう。ここでは、テキストフィールドに入力されたキーのコードを判定し、「M」が入力されたかどうかをチェックする簡単なクイズ形式のデモを作成しています。

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent keyCode</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-keyCode</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Mango" 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.keyCode === 109)
         divDisplay.textContent = 'Correct Answer';
      else
         divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
      textSelect.textContent = '';
}
</script>
</body>
</html>

コードのポイント

  • onkeypressイベントでgetEventData関数を呼び出し、eventオブジェクトを渡しています。
  • keyCodeが「109」（小文字の「m」）の場合は「Correct Answer」と表示されます。
  • それ以外の場合は「Try Again」とプレースホルダー内容を組み合わせてヒントを表示します。

実行結果

このコードを実行すると、次のような出力が得られます。

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

HTML DOM KeyboardEventのkeyCodeプロパティとは？使い方をサンプル付きで解説

テキストフィールドに誤った答えを入力した後 −

HTML DOM KeyboardEventのkeyCodeプロパティとは？使い方をサンプル付きで解説

テキストフィールドに正しい答えを入力した後 −

HTML DOM KeyboardEventのkeyCodeプロパティとは？使い方をサンプル付きで解説

  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 プロパティでトラックの総数を取得したり、イン