oninput イベント

DOM イベント InputEvent

定義と使用法

oninput イベントは要素がユーザーからの入力を受け取ったときに発生します。

<input> または <textarea> 要素の値が変更されたときにこのイベントが発生します。

ヒント：このイベントは以下に似ています onchange イベント。違いは、oninput イベントが要素の値が変更された後にすぐに発生し、onchange が要素がフォーカスを失い、内容が変更された後に発生することです。もう一つの違いは、onchange イベントが <select> 要素にも適用されることです。

インスタンス

例 1

ユーザーが <input> フィールドに内容を入力したときに JavaScriptを実行します：

<input type="text" oninput="myFunction()">

自分で試してみてください

例 2

範囲スライダー - スライダーの値を動的に更新する方法：

<input type="range" oninput="myFunction(this.value)">

自分で試してみてください

構文

HTML で：

<element oninput="myScript">

自分で試してみてください

JavaScript で：

object.oninput = function(){myScript};

自分で試してみてください

JavaScript で addEventListener() メソッドを使用する：

object.addEventListener("input", myScript);

自分で試してみてください

注釈：Internet Explorer 8 またはそれ以前のバージョンではサポートしていません addEventListener() メソッド。

技術的詳細

バブル： サポート
キャンセル可能： サポートしていません
イベントタイプ： Event, InputEvent
サポートする HTML タグ： <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> そして <textarea>
DOM バージョン： レベル 3 イベント

ブラウザサポート

表の数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。

イベント Chrome IE Firefox Safari Opera
oninput サポート 9.0 4.0 5.0 サポート
DOM イベント InputEvent