Removing jquery elastic from textbox

Question

I use jquery elastic to automatically change the height of the text area as the content grows.

my text area has id #statusupdate

and so applying elastic to it all i have to do is

$('#statusupdate').elastic(); 

Pretty simple!

My script detects that the user clicks outside the text area, and if this happens, deletes the user's text and adds the class to the text area to make it less visible on the screen.

The problem is that when applying elasticity to a text area, the height of the text area appears to be set elastic, and I cannot establish it. Is there a way to remove an elastic region from a text area or reset its data?

thanks for the help

Answer 1

There may be an elegant way to unleash / rebuild resilient events, but for quick brute force enumeration, you can use an important attribute to redefine CSS at the height of the textarea.

Create a text field with the rows attribute (so that we know what size the text field returns):

 <textarea rows="4"></textarea> 

Attach focus / blur functions to the text field to override / reset height:

 jQuery(function() { $('textarea').focus(function() { // remove any height overrides $(this).css('height', ''); // make it elastic $('textarea').elastic(); }); $('textarea').blur(function() { // override the height on the textarea to force it back to its original height $(this).css('height', $(this).attr("rows") + 'em !important'); }); }); 

Answer 2

Using the wysihtml5 editor, I found that just setting the height of the textarea to auto seems to undo the elasticity:

 $('textarea').css('height', 'auto'); 

The elasticity can then be reinitialized later, if necessary:

 $('textarea').elastic(); 

I need to do some more tests, but so far I have not noticed any problems (using elasticity 1.6.11).