Photo by Markus Spiske on Unsplash

Text Area Auto Xpander

By Swapnil Sarwe, Published on 11 Mar, 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

© 2021 Tails - Tailwindcss Page Builder

Instagram Twitter GitHub