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

HTML DOM InputEventのdataプロパティとは？使い方とサンプルコードを解説

HTML DOMのInputEventオブジェクトが持つdataプロパティは、テキストフィールドなどへの入力イベントで実際にタイプされた文字（文字列）を取得するためのプロパティです。ユーザーが入力した最新の1文字を参照できるため、リアルタイム入力チェックやバリデーション処理に活用できます。

構文（シンタックス）

dataプロパティの基本的な構文は以下の通りです。

テキストフィールドに入力された最新の文字を取得する場合：

event.data

サンプルコード

ここでは、InputEvent dataプロパティを使った具体的な例を見てみましょう。次のコードでは、テキストフィールドに入力された文字が「A」かどうかを判定し、正誤に応じてメッセージを表示します。

<!DOCTYPE html>
<html>
<head>
<title>InputEvent Data</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>InputEvent-Data</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Apple" oninput="getEventData(event)">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function getEventData(InputEvent) {
        if(InputEvent.data === 'A')
            divDisplay.textContent = 'Correct Answer';
        else
            divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
        textSelect.textContent = '';
    }
</script>
</body>
</html>

実行結果

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

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

プレースホルダー「__ for Apple」だけが表示された初期画面になります。

誤った答え（「A」以外の文字）を入力した場合：

「Try Again, __ for Apple」というメッセージが表示され、再挑戦を促されます。

正しい答え（「A」）を入力した場合：

oninputイベントハンドラによってgetEventData()関数が呼び出され、event.dataの値が「A」と一致するため、「Correct Answer」というメッセージが表示されます。

dataプロパティのポイント

  • inputイベント発生時に挿入された文字列のみを返します（削除時はnullを返します）。
  • beforeinputイベントでも利用可能です。
  • 複数文字の貼り付け（ペースト）の場合は、挿入された文字列全体が返されます。
  • IMEによる日本語入力の変換確定時にも、確定された文字列を取得できます。

このように、dataプロパティを活用することで、ユーザーの入力内容を柔軟に判定・制御することができます。フォームのリアルタイムバリデーションや入力補助機能を実装する際にぜひ活用してください。

  1. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1

  2. HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

    ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文（シンタックス） 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの