jquery.textchange.js

/*!
 * 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);

Nice, I'll be sure to point anyone to this fork that needs that functionality.

Is the 25ms delay required? I've not tested extensively, but it seems that the text content get around to update even with a delay of 0.

Under IE, when you use the Context Menu to delete the selected text, it doesn't trigger the event.
Under Firefox it does trigger however.

I've tryed my textchanged method, works ok with IE 7-9 with the scenario you described.

hm... that is odd. Are we really doing the same thing? I uploaded a short video of what I see: http://dl.dropbox.com/u/4791584/textchange.mp4
Notice that when I choose Delete the count doesn't update.

What version of jquery are you using ? Can you push your demo to jsfiddle ? It still works in my case with your scenario.

That is example 2 at: http://www.zurb.com/playground/jquery-text-change-custom-event

But trying the plugin locally on my own system with jQuery 1.6.2 - same thing.

Well example 2 (detecting text changes) works on IE7-9 on my system.
Wrote: aaa bbb ccc
Cut: bbb with context menu
Result: Text changed from aaa bbb ccc to aaa ccc

Well Cut works for me as well. But it's Delete that does not trigger an event.

ok you are right.
Seems to be a bug in IE9.
See the comment here: http://msdn.microsoft.com/en-us/library/gg592978(v=vs.85).aspx

hmm... interesting. So it work on older version? And older versions use attachEvent... I wonder if it would work under IE9 if one used attachEvent. Might be something to mention to the jQuery team..?

No :( attachEvent did not make a difference.

This is a great plugin, but it doesn't seem to work on dynamically added inputs. The bind works fine, but the textchange event is never triggered.

Right, it only works with regular event binding. It does not work with .live(), .on(), or .delegate().

thx for this plugin, but how I can use it with - live

whiteskull: It only currently works with bind. Would be awesome to see a rewrite that supports live as well.

Thank you very much for your plugin, it is already very useful!

I write a plugin that maintains form state: disable/enable save/reset buttons and modified/saved classes on the form. I listen to "textchanged" with one() (no selector) to mark the form as changed. In case the text returns to its original content / the content at the last savepoint, it would be great to get a unchanged event.

comment to my own comment: that in itself would only be useful if there is only one text field and the implementation is probably rather expensive.

I tried your plugin in IE8 it sems you can bind hastext and textchange events through bind() but not with on() and on() is preferred approach over bind() as it is deprecated. Wondering if someone has seen similar issue

What can I say ? Thanks ! :-)

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.

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

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

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

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

An event is not performed.

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

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.

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