2016年1月24日日曜日

入力要素の内容が変わったらイベントを投げる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です。

0 件のコメント:

コメントを投稿