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);
@garrettlancaster
Copy link

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.

@mkelly12
Copy link
Author

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

@whiteskull
Copy link

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

@mkelly12
Copy link
Author

mkelly12 commented Jul 2, 2012

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

@chaoflow
Copy link

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.

@chaoflow
Copy link

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.

@JProbe
Copy link

JProbe commented Feb 21, 2013

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

@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