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.

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

7 thoughts on “Text Area Auto Xpander”

  1. very usefull script, I have some queries about it,
    How to maintain the textbox height after postback, or how to set the height when I fetch the data from DB and then I display here.

  2. This is very very cool! But I have one important question. Is it possible to have the area resized onload, so that it will fit different amounts of text that are allready in the textarea? Im thinking about a blog or cms.

    1. @varun
      apologies for the inconvenience. its my bad while moving the website between the domains i didnt update the urls.
      anyways the links are fixed and now you can check the examples.
      i’ll also suggest to check the latest version of Xpander 1.0

      Do reply with your feedback.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>