Skip to content

Instantly share code, notes, and snippets.

@mkelly12
Created June 4, 2010 01:17
Show Gist options
  • Save mkelly12/424774 to your computer and use it in GitHub Desktop.
Save mkelly12/424774 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 ($) {
$.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);
@jeanph01
Copy link

What can I say ? Thanks ! :-)

@arthur-s
Copy link

It seems that there're bug in Firefox and Chrome in Ubuntu 12.04
Textchange worked perfectly in all browsers for Ubuntu linux, but 2 days ago it stopped to work both in Firefox and Chrome at the same time. But in Opera it continued to work, very strange.
Then i upgraded my browsers, and the problem has gone.

@ranadeep47
Copy link

Doesn't work on latest version of chrome
29.0.1547.66 (Official Build 220848)

@imkevinxu
Copy link

Ditto, the demos on this page seem to be broken for Chrome Version 31.0.1650.48 http://zurb.com/playground/jquery-text-change-custom-event

@vasilakisfil
Copy link

It doesn't work on Chrome and Firerox.. any idea?

@Zeokat
Copy link

Zeokat commented Mar 3, 2014

I was testing into Chrome and not works. Anyways i will work on your code, you saved Zeokat tons of work.

@KiruNiku
Copy link

An event is not performed.

1.$("textarea").val("test1\ntest2");
2.selected delete textarea value;

@baldmountain
Copy link

Because it uses keyup to decide if it should trigger it won't work with multi keystroke characters like ü or many Chinese characters. It triggers on the first keystroke rather than on the full character after the second keystroke.

@espellcaste
Copy link

The examples are not working on this page http://zurb.com/playground/jquery-text-change-custom-event

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