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
nice one
ReplyDeleteto bad it doesnt work
ReplyDeleteJust double check agian, it works
Delete