フォーカス中にループ処理を実行するJavascript

フォームタグのHTML

<div class="sample">
	<input type="text" maxlength="10" value="" />
	<span class="counter"></span>
</div>

HTML側では、入力欄があれば特に他の縛りはありません。
今回は、リアルタイム処理として入力文字数カウントを動かしているので、入力欄のinputと残り文字数カウントspan.counterの要素を置きました。

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="./jquery.realtimeEvent.js"></script>
<script>
$(function(){
	var ev_realtime = new WEBDEVscript.realtimeEvent({
		interval: 100 // ループの実行間隔(ミリ秒)。初期値は100。省略可。
	});

	// realtimeイベントを使えるよう紐付ける
	$input = $('.sample :input');
	ev_realtime.init($input);

	// 実行させる処理を作成(入力文字数をカウントするサンプル)
	var act_countup = function(e) {
		var $counter = $(e.currentTarget).next('.counter'),
		c = $(e.currentTarget).val().length;
		$counter.html(c);
	};

	// ループで実行させるよう紐付け
	$input.on('realtime', act_countup);
});
</script>

jQuery(ver1.7以上)と、countLengthHalfのプラグインを読み込んでから
HTMLの入力欄へ動きを設定します。

jquery.countLengthHalf.js ダウンロード