HTML DOM InputEventオブジェクトとは？主要プロパティと使い方を解説
InputEventオブジェクトとは
InputEventオブジェクトは、フォーム要素などのコンテンツが変化した際に発生するイベントを表すオブジェクトです。テキストボックスへの文字入力・削除・貼り付けなど、ユーザーによるあらゆる編集操作を「inputイベント」として受け取り、JavaScript側で処理することができます。
InputEventの主なプロパティ・メソッド
InputEventでは、以下のプロパティやメソッドを利用できます。
| プロパティ／メソッド | 説明 |
|---|---|
| data | 挿入された文字に対応する文字列を返します。 |
| dataTransfer | 挿入・削除されたデータに関する情報を含むオブジェクトを返します。 |
| getTargetRanges() | 挿入・削除によって影響を受ける対象範囲を格納した配列を返します。 |
| inputType | 入力の種類（どのような操作が行われたか）を返します。 |
| isComposing | イベントがIME（日本語入力など）の変換・確定処理の途中で発生したかどうかを示す真偽値を返します。 |
inputTypeプロパティの代表的な値
inputTypeプロパティからは、操作の内容に応じて次のような値を取得できます。
- insertText … 通常のキー入力によるテキスト挿入
- insertCompositionText … IME変換中のテキスト挿入
- insertFromPaste … ペースト操作による挿入
- deleteContentBackward … Backspaceキーによる前方削除
- deleteContentForward … Deleteキーによる後方削除
サンプルコード
それでは、InputEventのdataプロパティを使った具体例を見てみましょう。このサンプルでは、テキストフィールドに入力された1文字が「A」かどうかを判定し、その結果を画面に表示します。input要素にはoninput属性を設定しており、入力のたびにgetEventData()関数が呼び出される仕組みです。
<!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>実行結果
上記のコードを実行すると、次のように表示されます。
テキストフィールドに何も入力されていない状態：
誤った回答（A以外の文字）を入力した場合：
正しい回答（A）を入力した場合：
このようにInputEventオブジェクトを活用すれば、入力された文字をリアルタイムに判定・加工できるため、入力補助フォームやリアルタイムバリデーションなど、さまざまな場面で役立ちます。
-
HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説
HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注