Awesome jQuery Text Change Events by Matt
June 04, 2010 in Implementation with 18 Comments
Check out the ZURB jQuery Text Change Event Plugin »
It's a common problem, you have a text form that you need to validate client side. It's easy enough to do this when the form is submitted but in some cases better to do as they type.
Imagine how annoying Twitter would be if you had to submit your tweet before it told you how many characters you had left. On the other hand this same immediate validation can be abused if overused. Don't insult the user by congratulating them for each and every text field they fill in.
Implementing this requires binding events to the keyup event, and a couple other events if you want to detect text changes on cut and paste. Even if you're a JavaScript god it's tedious to keeping writing this logic over and over again. Be smart and use the ZURB text change event plugin instead.
Hop right on over to the ZURB playground to see a demo. The code playground is where we do crazy awesome stuff with JavaScript, HTML, and CSS.
18 Comments
Bryan (ZURB) says:
This is awesome stuff Matt. I think the magic of this little gem is that it makes the browsing experience better for people- it's not just code for code sake. It's great when little bits of code have such a large impact!
Memo says:
Could u tell me what "cut paste input" is from the plugin code? I can't get any infomation about it...
Matt (ZURB) says:
Memo: cut paste and input are three browser events that we use to detect when the user has cut or pasted into our text area. Look at the jQuery documentation for the bind function.
Nicky says:
Great jQuery plugin! The direct save-function is what we were looking for, thanks for it. You even uses it in the add your comment...block on this pagen.
Stephen says:
Really very useful thanks! Great for copying values between two text-fields (where one might be independently edited later) too!
Ryan says:
Nice job guys. Thanks for sharing the plugin. Is it possible to use it with the .live() handler instead of bind?
Matt (ZURB) says:
@Ryan: The plugin does not support event delegation and thus does not work with .live() and .delegate().
If you write a modified version of this plugin supporting event delegation I would be happy to post it here as an alternative.
Ryan Lonac says:
Gotcha, i will look into that and see what i can come up with.
Andre says:
Thanks guys for an awesome plugin.
I forked and made a simple change to add support for contenteditable elements. http://gist.github.com/443903
Thanks again.
Andre
Matt (ZURB) says:
@Andre: Nice, I merged that into my gist and the minified version on the playground page. Thanks for the fix.
arnold says:
thanks for this stuff zurb...
Leonardo Wong says:
Thanks for this nice plugin.
I have a problem here, I cannot change the DOM once i bind the textchange event. Firebug return InternalError: too much recursion { message="too much recursion", more...}
For example: <div id='mydiv'> <input type='text' class='myfield'> </div> $(".myfield").bind('textchange', function(){ alert('hello') }); $("#mydiv").html("replace by this")
it does not work. I tried to unbind textchange first, but the unbind command return the same error...
any idea? thanks
Ollie says:
In IE 7/8 when applied to a text input, the textchange event is only successfully triggered the first time. I’ve put together a minimal example. Anything I can do to fix this?
Matt (ZURB) says:
Ollie: I fixed this in the Gist: http://gist.github.com/424774
Janne says:
We're about to use this awesome piece of code in our upcoming open-source project, but before that we would like to know what's the license of this plugin? We don't want to be haunted by cops and lawyers...
Thanks!
Matt (ZURB) says:
@Janne: It's under the MIT license. I updated the Gist to show this. Enjoy!
John says:
I try using this plug in and it works fine in firefox but it does'nt work in ie
Matt (ZURB) says:
@John: What is the issue you are seeing and what version of IE are you seeing it on?
I just tested the playground page on IE6, 7, and 8 and it works just fine.
Add your comment...