Thursday, January 27, 2011

How to implement TextChanged event handler in JQuery

There is no TextChanged Textbox event handler in Javascript.
Following event handler can handle: Keyup, Copy, Paste and Cut


(function (a) {
    a.event.special.textchange = {
        setup: function () {
            a(this).data("lastValue", this.contentEditable === "true" ? a(this).html() : a(this).val());
            a(this).bind("keyup.textchange", a.event.special.textchange.handler);
            a(this).bind("cut.textchange paste.textchange input.textchange", a.event.special.textchange.delayedHandler)
        },
        teardown: function () {
            a(this).unbind(".textchange")
        },
        handler: function () {
            a.event.special.textchange.triggerIfChanged(a(this))
        },
        delayedHandler: function () {
            var b = a(this);
            setTimeout(function () {
                a.event.special.textchange.triggerIfChanged(b)
            },
            25)
        },
        triggerIfChanged: function (b) {
            var c = b[0].contentEditable === "true" ? b.html() : b.val();
            if (c !== b.data("lastValue")) {
                b.trigger("textchange", b.data("lastValue"));
                b.data("lastValue", c)
            }
        }
    };
    a.event.special.hastext = {
        setup: function () {
            a(this).bind("textchange", a.event.special.hastext.handler)
        },
        teardown: function () {
            a(this).unbind("textchange", a.event.special.hastext.handler)
        },
        handler: function (b, c) {
            c === "" && c !== a(this).val() && a(this).trigger("hastext")
        }
    };
    a.event.special.notext = {
        setup: function () {
            a(this).bind("textchange",
            a.event.special.notext.handler)
        },
        teardown: function () {
            a(this).unbind("textchange", a.event.special.notext.handler)
        },
        handler: function (b, c) {
            a(this).val() === "" && a(this).val() !== c && a(this).trigger("notext")
        }
    }
})(jQuery);
  



Usage:




    $("#textboxid").bind('textchange', function (event, previousText) {

        var textboxContent = $("#textboxid").val();

        if (textboxContent == "" || textboxContent == "default value") {

            $("#buttonid").addClass('disabled').attr('disabled', true);

        } else {

            $("#buttonid").addClass('disabled').attr('disabled', false);

        }

    });





Reference:


http://www.zurb.com/playground/jquery-text-change-custom-event

3 comments: