oninput - 入力時に発火する

投稿日:

JavaScriptの、イベントハンドラのoninputは、入力時に発火して処理を実行します。

説明

イベントハンドラのoninputはフォームに入力があるごとに発火します。onchangeがフォーカスを外したタイミングで発生するのに対して、こちらは入力によってフォームの値に変化があるごとにその都度、発火します。コピーで貼り付けた時、カットで切り取りした時も発火します。チェックボックス、ラジオボタンでは無効ですが、セレクトフォームでは有効です。

サンプルコード

<input id="target">
// 要素を取得
var inputElement = document.getElementById( "target" ) ;

// 処理を定義
var action = function() {
	// 処理内容
}

// イベントを設定 ( addEventListener )
inputElement.addEventListener( "input", action ) ;

// イベントを削除
inputElement.removeEventListener( "input", action ) ;
// 要素を取得
var inputElement = document.getElementById( "target" ) ;

// イベントを設定 ( oninput )
inputElement.oninput = function() {
	// 処理内容
}

// イベントを削除
inputElement.oninput = null ;

デモ

各フォームにoninputイベントを設定しました。イベントが発生するごとに、発生回数がカウントアップされます。

関連項目

外部リンク