Skip to content

Instantly share code, notes, and snippets.

@softlion
Forked from mkelly12/jquery.textchange.js
Created July 30, 2011 19:32
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save softlion/1115896 to your computer and use it in GitHub Desktop.
Save softlion/1115896 to your computer and use it in GitHub Desktop.
/*!
* jQuery TextChange Plugin
* http://www.zurb.com/playground/jquery-text-change-custom-event
*
* Copyright 2010, ZURB
* Released under the MIT License
*/
(function ($) {
$.fn.textchanged = function() {
$.event.special.textchange.triggerIfChanged($(this));
};
$.event.special.textchange = {
setup: function (data, namespaces) {
$(this).data('lastValue', this.contentEditable === 'true' ? $(this).html() : $(this).val());
$(this).bind('keyup.textchange', $.event.special.textchange.handler);
$(this).bind('cut.textchange paste.textchange input.textchange', $.event.special.textchange.delayedHandler);
},
teardown: function (namespaces) {
$(this).unbind('.textchange');
},
handler: function (event) {
$.event.special.textchange.triggerIfChanged($(this));
},
delayedHandler: function (event) {
var element = $(this);
setTimeout(function () {
$.event.special.textchange.triggerIfChanged(element);
}, 25);
},
triggerIfChanged: function (element) {
var current = element[0].contentEditable === 'true' ? element.html() : element.val();
if (current !== element.data('lastValue')) {
element.trigger('textchange', [element.data('lastValue')]);
element.data('lastValue', current);
}
}
};
$.event.special.hastext = {
setup: function (data, namespaces) {
$(this).bind('textchange', $.event.special.hastext.handler);
},
teardown: function (namespaces) {
$(this).unbind('textchange', $.event.special.hastext.handler);
},
handler: function (event, lastValue) {
if ((lastValue === '') && lastValue !== $(this).val()) {
$(this).trigger('hastext');
}
}
};
$.event.special.notext = {
setup: function (data, namespaces) {
$(this).bind('textchange', $.event.special.notext.handler);
},
teardown: function (namespaces) {
$(this).unbind('textchange', $.event.special.notext.handler);
},
handler: function (event, lastValue) {
if ($(this).val() === '' && $(this).val() !== lastValue) {
$(this).trigger('notext');
}
}
};
})(jQuery);
@softlion
Copy link
Author

Added textchanged method.

Usage: call $(elem).textchanged(); after you manually set the value of an input (using jquery or not), so the textchange,hastext and notext events are fired.

@askerb
Copy link

askerb commented Feb 1, 2012

How do you get the textchanged function to work? Setting the event handler for "hastext" works, but calling textchanged does nothing (undefined returned when trying in debugger console).

$("#Task_TitleInput").off("hastext").on("hastext", $.proxy(function ()
            {
                    this.EnableSubmitButton();
            },
            this));

$("#Task_TitleInput").textchanged();

@softlion
Copy link
Author

softlion commented Feb 1, 2012

Try to use bind / unbind instead.
on/off require that the event bubbles.
It should be the case though.
try replacing trigger with triggerHandler in the source code.
And please provide a jsfiddle.net sample of the non working code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment