入力欄の内容に変化したときにイベントを発火

入力欄の内容が変化したときに発火するイベントの作り方です。

イベント定義

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function($) {
    var changeValueIntervalId;
 
    var changeValueFunction = function(element) {
        var $element     = $(element),
            stockValue   = '',
            currentValue = '';
 
        if ($element.length === 0) return;
 
        changeValueIntervalId = setInterval(function() {
            stockValue   = $element.data('stockValue');
            currentValue = $element.val();
 
            if (stockValue !== currentValue) {
                $element.data('stockValue', currentValue);
                $element.trigger('changeValue');
            }
        }, 10);
    };
 
    $.event.special.changeValue = {
        add : function(event) {
            changeValueFunction(this, event.data);
        },
        remove : function(event) {
            clearInterval(changeValueIntervalId);
        }
    };
})(jQuery);

実行方法

1
2
3
4
5
6
7
8
$(function() {
    var $textarea = $('textarea');
 
    $textarea.on('changeValue', function() {
        console.log('change value');
    });
});