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

HTML DOM KeyboardEvent charCodeプロパティの使い方を解説

KeyboardEvent の charCode プロパティは、キーボードイベントで押された文字に対応する Unicode 文字コード（数値）を返すプロパティです。

注意： 正確な結果を得るためには、代わりに key プロパティを使用することが推奨されています。charCode は非推奨となっており、ブラウザによっては期待どおりに動作しない場合があります。

構文

構文は以下のとおりです。

直近に入力された文字の charCode を取得する場合：

event.charCode

使用例

ここでは、KeyboardEvent charCode プロパティの具体的な使用例を見てみましょう。テキストフィールドに入力された文字のコードが「122」（小文字の z）と一致するかどうかを判定し、結果を画面に表示するシンプルなクイズ形式のデモです。

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent charCode</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-charCode</legend>
<label>空欄を埋めてください：
<input type="text" id="textSelect" placeholder="__ for zebra" 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.charCode === 122)
        divDisplay.textContent = 'Correct Answer';
    else
        divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
        textSelect.textContent = '';
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような動作になります。

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

HTML DOM KeyboardEvent charCodeプロパティの使い方を解説

誤った答えを入力した場合

「z」以外の文字を入力すると、「Try Again」というメッセージとともにヒント（placeholder の内容）が表示されます。

HTML DOM KeyboardEvent charCodeプロパティの使い方を解説

正しい答えを入力した場合

小文字の「z」（charCode が 122）を入力すると、「Correct Answer」と表示されます。

HTML DOM KeyboardEvent charCodeプロパティの使い方を解説

まとめ

charCode プロパティは押されたキーの Unicode 文字コードを取得できる便利なプロパティですが、現在は非推奨です。新規の開発では、より直感的で信頼性の高い key プロパティ（例：event.key === 'z'）や code プロパティの利用を検討しましょう。

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