Elastic textarea

August 15, 2009 by nuno costa 3 comments

Ext.fc.autoHeightTextArea

Text Area the facebook way

 

About

Get your text areas to grow/shrink according to content

 

Features

  • No endless timer events, height is updated on key press
  • You can define max an min height and height increment for the text area

 

How to use it

1
2
3
4
5
6
7
8
9
<textarea id="grow-me">
    Start typing here to see the Text Area grow, delete text to see it shrink  
</textarea>
 
<script type="text/javascript">
Ext.onReady(function(){
    new Ext.fc.autoHeightTextArea().applyTo('grow-me');
});
</script>

 

See it in action

Check out the demo page

 

Download

download-now  

3 comments so far Add Your Comment

  1. by Build an Elastic Textarea with Ext JS on August 27 2009 at 11:57

    [...] The purpose of this article is to introduce you to Ext JS. If you know your JavaScript well, you might find that this code will only work for one textarea. If you’d like a more robust and flexible solution, get the Ext JS plugin that can be found over at my site. [...]

  2. [...] The purpose of this article is to introduce you to Ext JS. If you know your JavaScript well, you might find that this code will only work for one textarea. If you’d like a more robust and flexible solution, get the Ext JS plugin that can be found over at my site. [...]

  3. by tanila on October 8 2009 at 19:08

    Hi Franco,

    wow really cool idea. I want to do the same in my editor or in an extendex Textarea. Maybe you have a look at my editor:
    http://tanila.de/testing/index.php
    I am using YUI3

    Greetings from Germany

More from francodacosta.com

© francodacosta.com - All rights reserved