備忘録的プログラミングリファレンス

input ( oninput )イベント

 input ( oninput )イベントは、設定されたタグエレメントで入力があったら発生するInputEventEventインターフェイスのイベントタイプです。

input イベントを追加( oninput イベントハンドラーとして追加)
document.getElementsByName('example')[0].oninput = (event)=>{
	console.log( 'event type : ' + event.type );
};
詳しくは Example を参照してください

 input ( oninput )イベントはと同じような機能に change ( onchange ) イベントがあります。 input イベントは、エレメントの値が変化する度にイベントが発生します。 change イベントはエレメントの値が変化しフォーカスを失った時点でイベントが発生します。
 <input type="checkbox">、<input type="radio">、<select> は change イベントを使います。

構文(Syntax)

in HTML

<tagelement oninput="function()">

in JavaScript

object.oninput = function(){ };

object.addEventListener("input", script_);

備考(Remarks)

BubblesYes
CancelableNo
InterfaceEvent、InputEvent
Supported HTML Elements<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>

Example

 input ( oninput )イベントの例です。以下の「確認」ボタンをクリックしてください。

 入力内容が変化するたびにアラートが表示されます。event の詳細については、開発用コンソールを参照してください。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。