入力要素の内容が変わったらイベントを投げるjQueryプラグイン "jquery.modify"

JavaScriptをゴリゴリ書いているみなさんこんにちは。

突然ですが、HTMLの入力要素の中身が変わったらすぐに何か処理をしたい、と思ったことはありませんか。結構要望が多い使い方だと思うのですが、なかなかスマートな解決方法ってないんですよね。
changeイベントはフォーカスが外れるまで発行されないし、HTML5にはinputイベントがあるけどなるべく多くのブラウザに対応させたい…。

そんなあなたに紹介するのがjquery.modify。その名の通り、内容が変わったらmodifyイベントを発行するjQueryプラグインです。
ネーミングセンスないとか言わないでください。名前考えるの面倒だったんです。

使い方は？

普通に読み込む

scriptタグで普通に読み込む方法。

<script src="//code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="path/to/jquery.modify.min.js"></script>

これでOK。別途関数をコールしなくても、これだけでmodifyイベントが発行されます。
jQueryのバージョンは1.7以上でおねがいします。

requireを使う

Browserifyとかwebpackを使っている場合は、もっと簡単に記述できます。

$ npm install --save jquery.modify

でパッケージをインストールして

var $ = require("jquery.modify");

これだけでOK。しかもjQueryオブジェクトを返すので、別途require("jquery")をコールする必要はありません。

どういう仕組み？

やってることは簡単です。

• 入力要素にフォーカスが当たったらタイマーを仕掛ける
• タイマーで、一定時間ごとにvalue属性を監視
• valueが変更されていれば、その要素にmodifyイベントを投げる

こんなかんじ。
入力要素にフォーカスが当たっていなければタイマーは発動しないので、入力要素がたくさんある画面でも無駄にCPUを消費しないエコ設計です。

注意

• checkboxやradioのチェック状態の変化は検知できません（value属性が変わらないので）
• フォーカスが当たっていない要素の値をJavaScriptで変更しても検知できません（監視対象はフォーカスがあたっている入力要素なので）

ライセンスは？

MITライセンスです。改造も再配布も好きにやっちゃってください。商用利用もOKです。