Sticky Posts
Apr 4, 2009
Peculiarities of Textarea’s Wrap Attribute | jQuery Countermeasures
I was working on a plugin and wanting to add a checkbox near a text area to toggle it's wrap. I add the basic jQuery code and use …attr('wrap', 'off') but figure this: IT'S NOT WORKING!
Apparently, as wrap is not an official attribute browsers accept it but don't change it. I was like WTF!? WTF?! I searched for a workaround and the only way is to clone the node and replace the old one. Only when you clone the node you get to set the new attribute and you need to overwrite the cloned textarea. I sometimes find no-wrap useful as I get to see the actual lines in the element. I usually combine no-wrap with a checkbox next to the textarea that allows me to change it.
So ... Without Further Ado
This is my first jQuery extension. Add is somewhere in your jQuery custom code which you must have. Or, if you don't, create a new 5cripts.js file and paste there what jQuery code I share here for further use.
Registration is quick, painless and worth its weight in gold.
And this is how you use it. Add this code in the checkbox tag.
onchange="jQuery('#textarea-id').wrapSet(!jQuery('#checbox-id').is(':checked'));"
Enjoy.
PS: I use this in my plugins. Make sure you have it handy.
Hello.
I am attempting to use your jquery-powered wrapset javascript. However, I have ran into two bugs that you may know a solution first. In both Firefox and Internet Explorer it does successfully change whether wrapping is on or off. The Firefox issue is a pretty big problem for me since users can lose their changes.
In Firefox, when you toggle wrapping it resets the textarea content to the content that existed when the page loaded, not the current content. The line “newNode.value = node.value;” does not seem to be working…
In Internet Explorer, after toggling the checkbox you must then click inside the textarea for the change to display. Is it possible to have it show the change in wrapping without having to click inside the textarea? I tried triggering focus() on the textarea but that didn’t work.
Thank you so much for your time and I would appreciate if you could provide any input. I’ve tried all kinds of things without success. The Firefox issue is the biggest one. Thanks! -Dustin
I’ll do some test today and notify you a bit later on.
I use Opera and it works there.
Sorry for the delay.
Replace newNode.value = node.value; with newNode.val(node.val()); in both functions and it works in FF/Opera … for me anyway.
In IE it’s not working as it does not recognize wrap as a valid attribute … no chance to make it work I think.
Thank you so much for that! It is now working perfectly now in FF for me.
I just realized that I got it partially working in IE using the following:
For enabling:
this.setAttribute(’wrap’, ’soft’);
disabling:
this.setAttribute(’wrap’, ‘off’);
While this does turn it on and off, it only takes effect after clicking inside the textarea. Weird but it’s better than nothing.
If you’re curious about my use of it, http://www.typity.com
It’s a free site for taking notes. I made it first for my own use and figured some others might find it useful to store notes online. All the existing solutions seem to require a ton of clicks just to edit a simple note. I credited you in the site changelog as we don’t currently have a good place for that…
Anyways, thank you so much for your help on this. You really have a great site here!