oninputイベント
例
ユーザーが<input>フィールドに何かを書き込んだときにJavaScriptを実行します。
<input type="text" oninput="myFunction()">
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
oninputイベントは、要素がユーザー入力を取得したときに発生します。
このイベントは、<input>または<textarea>要素の値が変更されたときに発生します。
ヒント:このイベントは、 onchangeイベントに似てい ます。違いは、oninputイベントは要素の値が変更された直後に発生するのに対し、onchangeは、コンテンツが変更された後、要素がフォーカスを失ったときに発生することです。もう1つの違いは、onchangeイベントが<select>要素でも機能することです。
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
Event | |||||
---|---|---|---|---|---|
oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
構文
HTMLの場合:
<element oninput="myScript">
JavaScriptの場合:
object.oninput = function(){myScript};
JavaScriptでは、addEventListener()メソッドを使用します。
object.addEventListener("input", myScript);
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | はい |
---|---|
キャンセル可能: | 番号 |
イベントタイプ: | イベント、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のイベント |
その他の例
例
範囲スライダー-スライダー値を動的に更新する方法:
<input type="range" oninput="myFunction(this.value)">