[Javascript] テキスト入力欄(input, textarea)の値をリアルタイムに監視するには

テキスト入力欄の値によって動的な処理を行いたい場合、現状Javascriptのビルドインなイベントでしっくり来るものはない。

例えばInput要素のvalueの変更を検知するイベントとしては、「change」イベントがあるが、これは対象のInput要素からフォーカスが外れた時に発火する。
これでは入力中の値をもとにリアルタイムな処理を行う事はできない。

別の例としてInput要素に対して「keydown」, 「keyup」, 「keypress」などのイベントでキーボードからの入力に応じて変更があったとみなすとしても、実はブラウザごとにIMEがオンになった状態での前述の3種のイベントの振る舞いが異なる。
具体的にはFirefoxにおいてIMEがオンになった状態で入力を開始すると、keyupイベントは最初の位置文字目で発生し、あとは何文字打とうと確定するときのエンターキーの入力までkeyupイベントは発生しない。
となるとIMEオンの時は入力に応じてリアルタイムに監視することはできない。

ということで、最後の方法としてテキスト入力欄の値をintervalで常時監視して変化があった時に処理を行うしか道は残されていない。

例としてid=”target_input”が指定された要素に対し、

<input id="target_input" type="text" value="" />

以下のような処理で求める動作が実現できる。

var timer = null;

var input = document.getElementById("target_input");

var prev_val = input.value;

input.addEventListener("focus", function(){
	window.clearInterval(timer);
	timer = window.setInterval(function(){
		var new_val = input.value;
		if(prev_val != new_val){
			/* inputに変更があった場合の処理 */
		};
		prev_value = new_value;
	}, 10);
}, false);

input.addEventListener("blur", function(){
	window.clearInterval(timer);
}, false);

今回はテキスト入力欄にフォーカスがあるときのみ10ms毎にvalueをチェックして前回取得時と違う値だったなら…

という仕組み。

広告

t87r について

趣味:トランペット・釣り・コーディング JavascriptとGAE/Pythonを勉強中。
カテゴリー: Web Design タグ: , パーマリンク

[Javascript] テキスト入力欄(input, textarea)の値をリアルタイムに監視するには への4件のフィードバック

  1. 壱冢想西 より:

    HTML5では、inputというイベントがあります。
    この案件に対して最適のイベントであると思われます。

    • noriaki より:

      JavaScriptで値を変更した際、oninput=”関数XXX();”
      では、動かないのですが、この場合どうしたらいいですか?

  2. よまくら より:

    2年前の記事ということでいまさらですが、
    14行目の
    prev_value = new_value;

    prev_val = new_val;
    のミスではないかと思います。

    今回こちらのコードを使用させていただきました。
    ありがとうございました。

  3. d_kawakawa より:

    textareaタグの属性で oninput=”alert(1)” としたら反応しました。
    情報ありがとうございました。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中