Photo by Brett Jordan on Unsplash

Text Area Auto Xpander 0.9

By Swapnil Sarwe, Published on 05 Jul, 2009

Text Area Auto Xpander 0.2 had few issues and very limited options. But there is a good news, Xpander 0.2 has grown up to Xpander 0.9 and now there are fewer issues and couple of more options:

Issues Fixed:

  • The previous version used negative marginLeft to hide the cloned textarea which used to make the other element following the textarea to be not visible on the page. Now textarea are absolutely positioned them as in jquery-plugin-autoresize of James Padolsey to fix the issue.
  • Also the tab index of -1 has ben added to avoid the focus being taken to the hidden textareas.
  • The animation has been given as option rather than having two different JS files (one for easing effect and one without it), you can now just turn on or turn off the animation for expanding the textarea.

Options

  • animation - true or false will have the text area 'expand with ease' or 'expand directly'.
  • xtraSpace - The extra space or height in pixels by which the textarea should expand.
  • delay - The delay in milliseconds in ease for the expansion of the textarea.
  • callBack - The callback function which executes eveytime the text area expands.

Possible future changes/options:

  • In this 0.9 version too, by default all textarea gets this Xpansion functionality. Because I think its must for all textareas and not for just selected texareas. Still having an option to do it either way would be nice to have.
  • Also if textarea at the beginning itself has more text that the specific height of the texarea, in that case the change in the texarea is necessary to trigger the expand in textarea as per the content. Thats the tough one since I am not that good in events. Still would like to fix this issue to soon.

Example:

Xpander

<script type="text/javascript" src="Xpander0.9.js">
</script>
<script type="text/javascript">
    window.onload = function(){
        Xpander({
            animation: true,
            xtraSpace: 15,
            delay: 10,
            callBack: function(){
                /* Your callback function here */
            }
        });
    }
</script>

Xpander 0.9

If you find any bug, or have something which will improve this plug in just let me know in the comment section.

© 2021 Tails - Tailwindcss Page Builder

Instagram Twitter GitHub