Text Area Auto Xpander

This plugin or snippet is completely based on and inspired by James Padolsey's jQuery plugin: 'autoResize'. The idea is to have text area expand automatically as the user types the content more than what text area was initially meant to accomodate.

Categories: programming, projects
Posted by Swapnil Sarwe on Mar 11, 2009

Before getting down to any conclusion about this post. Check out the the plugin by James Padolsey viz. jQuery plugin: 'autoResize' which is built under jQuery.

Well this post is just to imitate his plugin in my own way without any JS library. It does not have any options to set which user can configure with. But by this weekend I'll try to make it more dynamic with several configurable options, which might include:

  • extra space: the value by which textarea should Xpand when it reaches the limit.
  • limit to xpand: the maximum value after which textarea should not expand
  • others: might try to put in all the options which james have made available
  • most important : to make it more efficient and robust and compatible with every browser and every situation

Updates:

Well friends, I have updated the snippet with some of the options like "extra space", "delay to expand (available in XpanderAnim.js)" and "callback function (which executes everytime the textarea expands.)"

It is to be loaded on window.onload function, and it is applicable to all the textarea on the web page. The way you can add it to your web page is simple.

Example:

Xpander without animation

<script type="text/javascript" src="Xpander.js">
</script>
<script type="text/javascript">
    window.onload = function(){
        Xpander({
            xtraSpace: 15,
            callBack: function(){
                /* Your call back function*/
            }
        });
    }
</script>

Xpander with animation

<script type="text/javascript" src="XpanderAnim.js">
</script>
<script type="text/javascript">
    window.onload = function(){
        Xpander({
            xtraSpace: 15,
            delay: 10,
            callBack: function(){
                /* Your call back function */
            }
        });
    }
</script>

Demo

The following links and source files are updated with the latest code.

Download