This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.
This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.
How to use Elastic
The usage of Elastic is very straight forward. All you have to do is include the javascript file containing the plugin and use the elastic method.
$('#myTextarea').elastic();
Known issues
EM The elastic plugin does work with font sizes, line-heights and such set in em, but it does work better with px. Elastic needs to convert your em value to a pixel value. 1.2em might be 16.56478px which is not exactly the same as 1.2em. After a couple of hundreds of rows the height of the text area is going to be too small or too big.
| Version | Changes |
|---|---|
| 1.6.3 | Fixed issue with continuous spaces and words longer than the width of the textarea (Thanks to Michael A Maw, Eviltwinfletch and Jibum Jung) |
| 1.6.2 | Fixed an issue with max height in Opera (Thanks to Martin Grandrath) |
| 1.6.1 | Fixed a cpu overhead issue, and changed incorrect css selectors to correct ones. (Thanks to Eric Caron, Martin Borthiry and Ara T Howard) |
| 1.6 | Fixed an issue with using elastic on multiple textareas (Thanks to Michael for reporting the bug and finding a solution) |
| 1.5 | Complete refactor of the plugin |
| 1.4 | Fixed an issue regarding disappearing carets |
| 1.3 | Made it compatible with JQuery 1.3.2 and added proper support for max-height (scrollbars visible when textarea reaches max height). The animation is removed. (it took to much visual focus and it did not work well with Google Chrome) (Thanks to Casper Fabricius and Marcus Kabele for contributing to this version) |
| 1.2 | Fixed an issue where the textbox height would twitch when using smaller font sizes. (Thanks to Dimitry for reporting the problem and providing a solution.) |
| 1.1 | Fixed a problem with Internet Explorer 6.0 where the plugin didn’t work if a height attribute in the CSS wasn’t set. (Thanks to Eric for reporting the problem.). |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Chat
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
The links on this page: http://plugins.jquery.com/project/elastic
…that come back to here are broken.
Awesome work on this plugin.
Awesome plugin! Two minor comments: on Mac FF the textarea border on the left appears glitchy. It’s almost looked like some type characters were interfering with it as it expanded, eroding the solid line of the textarea. Secondly, doesn’t work on IE6.
Thanks Eric, I am gonna take a look at in a few days.
@Eric:
I can’t recreate the border problem in FF3 in OS X Leopard. The reason why it didn’t work in IE6 was the lack of a height attribute in the css - I’ve created a fallback for that now. The demo and download pages are now updated with version 1.1.
I really appreciate the input. Just let me know (jan.jarfalk@unwrongest.com) if you find any other bugs and I will try to fix them.
Excellent plugin — tks!
Best elastic textarea plugin around.
I had a few issues however:
1) I noticed that when I typed a large block of text into the textarea, my page’s height increased because of the hidden div. I switched to using “display:none” instead of “visibility:hidden” for the hidden div.
2) I noticed that the text typed into the textarea sometimes wasn’t the text that was getting into the hidden div. I modified the .js to also replace “&” with “&” and ” ” (multiple spaces) with ” ”.
3) I noticed that the textarea doesn’t size correctly unless you specify font-size in pixels. I use yahoo UI’s fonts.css which specifies textarea fontsize in ems. I don’t know enough about js to know if elastic can be modified to behave correctly when font size isn’t specified in pixels.
4) I noticed that I would get some wierd behavior where the textarea text would wrap at a different point than the hidden div. I removed the ‘overflow-x:hidden’ style from the hidden div (not sure why it was there). I added a class named “prewrap” which is specified as:
.prewrap {
white-space: pre;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
I first tried to implement this in jQuery by applying styles via css() but I got exception messages so I converted it to a .css and just applied the class via addClass(). Perhaps you’ll know how to implement a javascript-only solution.
5) It appears that Google’s Chrome browser always leaves about 18px of right padding on textareas for scrollbars (even if the scrollbars aren’t actively being displayed). I’m not sure how to disable that feature of the textareas.
6) I notice that the tag which is inserted to replace \n appears to be re-written by the browser. Perhaps caching the appropriate value will result in “if (twin.html() != content)” evaluating to false at some point.
Thanks again for making this plugin available. It’s been really great.
Hi There, love the code, really well done.
I was wondering, is there a way of determining if a textarea has been ‘elasticated’, i ask this because i have an admin page that has several hundred textboxes on it, and rather than apply .elastic() via each (which adds 2 secs page load) i do it via <textarea onmouseover=”$(this).elastic();”..It’s not the ideal solution but it works just fine…but back to my question is there an easy way to check if the textarea in question has had .elastic applied to it, so i could do something like <textarea onmouseover=”if (!$(this).hasElastic()) $(this).elastic();”..
Cheers, James
@James - You could add the flag yourself like this:
if ($(this).data(’hasElastic’) != true) { $(this).elastic().data(’hasElastic’, true); }
Cute hack. Things start to become ugly when you type enough to make the textarea grow taller than the browser window, though…
@Egypt Urnash:
Thanks for the feedback! If you explain what you mean by ugly and what browser are you using, I will try to fix it.
Have people had any issues with this in Safari? the demo works fine, but when implemented in a page I’m working on, it fails to function, though after stepping through the source the jquery set css height property is being called, safari just isn’t doing anything about it.
Its working fine in other browsers though.
@chris: Does your textarea have a height set? Try setting one in the css.
I’ve noticed, that for textareas with small font–size, plugin works a bit silly, and height is twitching a bit every time, when I’m typing (without breaking a line).
This looks a bit annoying, so, I’ve added small fix for this, here it is:
if(Math.abs(goalheight - textarea.height()) > 5)
instead of if(goalheight != textarea.height())
Now it works much smoother! Thanks for great plugin!
Thanx for this Plugin.
When I write a long text, I don’t want the textarea to grow forever. So I added a ‘max-width’ to the textarea. This works, but when the maximum height is reached, there is no scroll bar or it disappears again.
It would be great if the plugin would grow until max-height is reached, and then re-display the scroll bars.
That could solve Egypt Urnash concerns too.
Thanx, Marcus
I too would like to see the plugin re-display the scroll bars after a max-height is met.
Also It would be great to have horizontal scroll bars for non-breaking text, such as urls, that is wider than the max width.
Just want to let you know that it does not work (anymore) neither in IE6 on Windows nor Firefox 3 on Mac.
@Thomas:
You sure? The demo uses the latest version and it works like it should, at least for me.
http://sandbox.unwrongest.com/jquery.elastic/
Thank you Dmitry , this fix worked for me.
The scroll bar at max height would be great as others have said.
Thanks for the plugin!
I had to change tweak the script a bit to get it running with jQuery 1.3.2.
I replaced this:
$.each(mimics, function(){
twin.css(this,textarea.css(this));
});
with this:
$.each(mimics, function(){
twin.css(this.toString(),textarea.css(this.toString()));
});
So I basically had to add .toString() when it loops through the attributes to mimic.
@Casper Fabricius:
Thank you very much. I implemented your update in version 1.3
Thanks for a great plugin! I am using for a current project.
One thing I’ve noticed is that it does not work as expected with % width textareas, since the twin (hidden div) is appended to the body and hence becomes the % of body rather than the same width as the textarea.
My initial thought was to fix this by changing the appendTo to textarea.parent(), but with it being absolutely positioned it does not seem to work, and I had some issues with it only working when removing the display:none from the div.
Needless to say, I’ve spent as much time as I’m going to debugging the issue at the moment, but thought I’d put it out there in case anyone else has come across it already or wants to have a go at fixing it.
For now, I’ve switched my textareas to pixel widths and the plugin is working very nicely. I’ll look into this again when I get a bit more time.
And why aren’t you using the elastic plugin on this comment textarea!
Hm, it seems to me useless, if the pulsating Line after the text is not shown anymore, after enlarge the textarea.
Sorry Ben, I cant figure out what you are trying to say.
Jan,
He’s saying that the cursor disappears occasionally while typing. This happens for me as well.
I think the problem might be that it doesn’t compensate for padding on a textarea. Cause your demos work perfectly for me.
Ill have a look at it!
and what about input text ? How to change plugin to work with this type of box ?
It doesnt work with input fields, you have to use textareas.
Hi all!
Just needed auto-growing textareas for a project and I did it by myself… obviously haven’t searched enough for some script that does it for me. Well finally I’ve found it ^^
By the way: Why should overflow be hidden?! If I delete the corresponding lines there are scrollbars.
I think a very interesting feature would be the assoziation of textareas so that they grow together to the size of the biggest one. That is what I had to do.
If you paste a lot of text into the textarea the scrollbar will show for a second if its not overflow hidden. Im trying to keep my plugins lightweight so I’m afraid that grow-together feature isn’t really something I would put in it.
Hallå hallå, superbra script du gjort!
I’m wondering how to make the div (which contains the textarea) expand along with the textarea (like on facebook). Right now it expands outside of the div.
Oh, no worries. Solved it by setting the div’s height to auto.
I try applying it on my website, it works perfect on ie, safari and google chrome…. but in firefox, it shakes/blinks a lot while typing ….how can that happen?
Your demo works quite well on firefox…
I don’t know why…. is it because you use iframe?
Hmm. the iframe shouldnt change anything. Can I have a look at your code?
I experience problems when using elastic on textareas who are inside a slideToggle() block.
Actually elastic doesnt work with textareas which are inside a display: none; area.
If one has more of those fields inside of display:none; areas one has to open ALL of them (via slideDown() for example) to make elastic start working on those fields.
What can be done to fix this?
Thank you!
I should’ve found this earlier. I made my own lol but it’s basically the same thing. Except I didn’t take into consideration the padding. Mine doesn’t have animation either, too slow. I made one for text inputs too, the width changes as the user types. Maybe you should add that to this plugin.
Excellent plugin! However, found a bug…
I have a page with multiple textareas with identical “name” attributes…
Some text
Some more text
The last text
Applying your elastic plugin to all of these textareas will actually overwrite their contents with the LAST textarea’s contents (”The last text”). This happens regardless of what browser I’m using. I narrowed down the problem to this code…
// Google Chrome bug.
if (first)
{
temp = $textarea.val();
$textarea.val(”);
setTimeout(function()
{
$textarea.val(temp);
}, 1);
first = false;
}
Commenting out this code resolves the issue. Not sure what Google Chrome bug this was supposed to resolve, but it seems to work fine in Chrome for me with this code on or off.
Thanks for the bug report Michael.
The Chrome bug seams to have been solved by Google.
The new version 1.6 does not contain that code block and therefor solves this issue.
Thanks again!
Now that I’ve compared our codes a bit further I found yours has a small bug. It collapses white space, so if someone types a bunch of spaces on one line and then follows it with words, the script may not measure the twin right and will resize much later.
This can be fixed if you wrap the twin around a pre tag instead. Also you will want to use white-space: pre-wrap, it’s not supported by all browsers but do a quick google search for a fix.
Try to type something like “aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa” to your sample form. I quess you are trying to take number of lines using . It isn’t good idea.
why you are writing in this way. In what situation you need to write this type of word. Like “Kick my own assssssssssssssssssssssssssssssssssssssssssssssssss…”
Awwww… you are filtering html tags… “take number of lines using <br />”
Hmm. No not at all. Where did you get that from?
Thank you for an awesome plugin!
I have found one issue in Internet Explorer. I am using elastic on multiple textareas on one page. Some of the text boxes resize perfectly to the content, while a couple others are a half of a life too short and some are up to 2 lines to short.
The page displays perfectly with firefox.
I tried disabling all of my css to see if it was conflicting with something, but it still had the exact same problems.
Is there anything else I can try to correct it?
Thank you again!
set the textareas font-size and line-height using pixels.
Thank you for your reponse!
I explicitly set the line-height, which I did not have a css entry for and now all of the text areas that were half a line too short now look perfect.
There is just one box that is still unchanged and a full 2 lines short. Here is the content of that box that may be helpful to you:
CRITICAL TO FUNCTION DIMENSIONS: DETAIL 5, CHAMFERS, .015 +/- .002, & EDGES MUST BE SHARP. BARB O.D. 2.220, BARB TO END OF PART 1.250, BARREL I.D. 1.844 +/- .004, DETAIL 2, LUER
.083, & .1565 +/- .002. [SEE NOTES HERE]
The info above is taken directly from the part prints. Some of the dimensions will be categorized under the “Steel Safe” section on this job worksheet. As of 05/15/09, the customer has not yet provided “Current steel sizes” and specific “Steel Safe” dimensions have not been designated so the drawings can be updated. SKH
The .083 critical dimension on page 1 of 2 on the customer part print will be derived from (3) details (030, 073, 080)
Thank you again!
hey,
this is a great plugin because i’ve looked around for similar features and couldn’t find one that meets my needs, so congratulations for doing such a great job.
i have a couple of questions to ask you. The first on would be if is it possible to use it in a commercial application? I couldn’t find any related info about this topic. And the other one arises in the situation where you have multiple text areas and you want only certain ones to be plugged in, maybe by providing their id.
Cheers
Really nice. I like it a lot. However, it doesn’t work right if a line wraps and that same line has no spaces within the first wrap. If you don’t understand, try typing whatever into the textarea with no spaces until it wraps to the next line. You’ll notice that the textarea doesn’t get longer. Continue the same thing until it wraps at least three or four times. Still no change in the textarea (and there should be a scroll bar but there isn’t). Now hit space. It automatically adds one more line, but that’s it. It doesn’t account for all the other lines. Email me and let me know when you get this message :) I’m testing on Goog Chrome 3.0.197.11, Vista Home Prem.
great, thank you.
i’m gonna try it right now
Interesting implementation.
Two quick points.
1) Can you state what license this is released under?
2) Can you change the references from the $ function to the jQuery function - so that this may be used in conjunction with other libraries? (See http://docs.jquery.com/Plugins/Authoring and http://docs.jquery.com/Using_jQuery_with_Other_Libraries)
This plugin looks very useful, but it is not clear if it can be enabled/disabled on request on a specific text area. (I have various text area in one page, and want only the active one to stretch)
Jan, thanks for the awesome plugin!
I seem to be having problems with Opera. It behaves as though the script isn’t even there. Instead of expanding, the text area shows the scroll bars.
Any ideas?
Thanks.
The result is simply awesome. This plugin is just a must to have for all back offices in which text can be really huge and hard to see in a simple box. Awesome job.
I ‘ve downloaded but it does not work for me in IE 8
Have you set lineheight and fontsize in pixels? If not try that.
Hi,
i like this script
cool!
[...] In: JQuery plugins 4 Sep 2009 Plugin jquery para fazer textareas aumentarem e diminuirem conforme o texto cresce / diminui Go to Source [...]
Internet Explorer 6, 7, 8 require the font size to be specified in pixels and not em’s. I read that earlier here, in a comment, needed to be repeated.
[...] Elastic – Make your textareas grow Facebook style jQuery plugin | Unwrongest (tags: textarea elastic expand jquery plugin javascript grow) [...]
[...] Sesuai namanya, plugin jQuery Elastic ini berfungsi untuk membuat ukuran form textarea menjadi “elastis” (dapat meluas sesuai banyaknya teks yang ditulis). Plugin ini terinspirasi dari auto-growing textarea yang terdapat pada Facebook. Silakan dicoba di Unwrongest. [...]
Nice effect
[...] source and documentation at : http://www.unwrongest.com/projects/elastic/#demoMost Commented PostsAjax File upload - Jquery Plugin (22)How to edit /etc/fstab when at Fedora [...]
[...] Elastic – Make Your Textareas Grow [...]
This is missing one thing:
word-wrap: break-word;
This makes it so if you type really long text, longer than the width of the div, it will still do the resize. In the demo if you just hold down a key for a long time, it makes very buggy behavior. This one little css rule fixes that.
Also, I added an onResize callback to run a function on the selected textarea when there is a resize.
var settings = $.extend({
onResize : function(){}
}, options);
added to the top of the elastic function.
settings.onResize.call(this);
added after $textarea.css({’height’: curratedHeight + ‘px’,'overflow’:overflow});
Great Plugin, BUT the textarea doesn’t resize itself when there is already a value in the textarea. First the textarea has to get the focus and then a keypress has to be done - then the plugin recalculates the height.
This has also to be done when the page is beeing loaded - otherwise you can’t read the whole content of the textarea.
I still cannot get this to work with multiple text areas.
would anyone happen to know if this control will work in IE7 if the textarea is instead a fieldset?
doesn’t seem to work for me
Love the plugin, I should have looked before I wrote my own :)
http://www.dave.vc/wordpress/?p=65
this works for me in a html page, but not if i copy the code and insert into as aspx page…can anyone provide any help? it’s the SAME code!!! but it won’t work when i copy it into a different page…i have updated the relevant stylesheet /js links….
Bug: It fails to increase textarea when writing something continuously and never press space or enter. Also it would be nice for an option to ignore Enter similar to Facebook.
As a fellow Swede and JavaScripter, let me say: impressive! :-)
Good performance, good user experience.
When I’m editing text in the middle of the textarea and it resizes, my selection cursor jumps to the end of the textarea (and doesn’t stay in the same spot that I’m typing in). This seems like a pretty critical bug, am I doing something wrong?
I’m getting an error in the firebug console that reads:
$textarea.live is not a function
I’m currently using the script on a drupal site which ofcourse contains a lot of other scripts which might be interfering somehow. The error disappears if I inactivate the script. Any ideas?
Try updating Jquery to version 1.3.2
Can I have a sinle-line textarea in the beginnging that looks like a simple text input? Thanks!
Hey I think I spotted a bug with elastic in IE8 on a Win 7 Ultimate Box.
When elastic is initialised and page loads, the elastic applied textbox grows too tall (by default when page loads) that it takes up half the page. Any ideas on how to fix this?
By the way this plugin DOES WORK in IE6 but not IE.5.5, I been doing some thorough testing today with it in IE.
Thanks and keep up the great work!!!!!! :-)
The script adds an extra line at the bottom.
How can this be removed?
Thanx.
thanks dude just save me! :)
I get the same $textarea.live is not a function error, I have the latest jquery api.
Fantastic stuff. I love the way you started brilliant then just went on tuning.
µ
Hello,
Is it possible to make update (programming) of the texarea height after expansion?
something like –> $(’textarea’).elastic_update();
for decreasing the height of the textarea
Thanks
Hi. This is great!!
It would be great though if you could tell me how to remove the extra blank (buffer) line that is created.
I tried it on FireFox 3.5.4
but it words with bad shape
The frame becomes unorganized … WHY ?!?
especially the width of the frame, it destroys my page
Hello. I’ve merged our codes together and made many updates. The main one being that it works with text fields too but I’ve also fixed many issues in yours. You can find it here
http://www.oroly.com/script/jquery.elastic.js
See this to see summary of updates
http://www.oroly.com/2010/January/6/resizeable-textareas-that-grow-and-shrink-to-fit-its-content
Keep in touch. :)
This Line fucks Opera:
maxheight = parseInt($textarea.css(’max-height’),10) || Number.MAX_VALUE,
parseInt gives -1 and opera takes this not as false, so uses -1 instead of the max value 1,7…
Solution: Define a max-value:100% or something like this. And have a look at http://colorhat.com :) see you there.