HTML DOMのInputEvent inputTypeプロパティとは？使い方とサンプルコードを解説
HTML DOMのInputEventオブジェクトが持つinputTypeプロパティは、テキスト入力フィールドで発生した入力イベントの種類（操作内容）を文字列として返します。このプロパティを活用することで、ユーザーが「文字を入力した」のか「削除した」のかといった具体的な操作を判別できます。
主なinputTypeの値
- insertText … テキストを入力（挿入）した場合に返されます。
- deleteContentBackward … Backspaceキーで前方の文字を削除した場合に返されます。
- deleteContentForward … Deleteキーで後方の文字を削除した場合に返されます。
- insertCompositionText … IMEによる日本語変換などの変換テキスト挿入時に返されます。
構文
inputTypeプロパティの基本的な構文は以下のとおりです。
event.inputType
サンプルコード
ここでは、InputEvent inputTypeプロパティの動作を確認できる実装例を紹介します。テキストフィールドへの入力・削除操作に応じて、画面に異なるメッセージを表示します。
<!DOCTYPE html>
<html>
<head>
<title>InputEvent inputType</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-inputType</legend>
<label>Action teller:
<input type="text" id="textSelect" oninput="getEventInputType(event)">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventInputType(InputEvent) {
if(InputEvent.inputType === 'insertText')
divDisplay.textContent = 'You are typing: '+textSelect.value;
else if(InputEvent.inputType === 'deleteContentBackward')
divDisplay.textContent = 'You are using backspace key';
else if(InputEvent.inputType === 'deleteContentForward')
divDisplay.textContent = 'You are using delete key';
else
divDisplay.textContent = 'You are sitting idle, do something';
}
</script>
</body>
</html>コードの解説
このサンプルでは、テキスト入力欄にoninputイベントハンドラを設定し、入力のたびにgetEventInputType()関数を呼び出しています。関数内では、イベントオブジェクトのinputTypeプロパティの値を条件分岐で判定し、以下のように表示内容を切り替えています。
insertTextの場合 → 「You are typing: （入力中の文字列）」と表示deleteContentBackwardの場合 → Backspaceキーの使用を通知deleteContentForwardの場合 → Deleteキーの使用を通知- それ以外の場合 → アイドル状態であることを通知
実行結果
上記のコードをブラウザで実行すると、以下のような結果が得られます。
テキストフィールドに何も入力していない状態：
テキストフィールドに入力している状態：
Backspaceキーを使用した状態：
Deleteキーを使用した状態：
まとめ
inputTypeプロパティを使えば、単なる「入力イベントの発生」だけでなく、その背後にある具体的な操作（挿入か削除か、どちら方向の削除か）まで正確に把握できます。リアルタイムバリデーションや入力補助機能など、インタラクティブなフォームを実装する際に非常に有用なプロパティです。
-
HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説
HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示
-
HTML DOM offsetWidthプロパティの使い方をわかりやすく解説
HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー