Textarea Resize JavaScript: Resize textarea using jQuery plugin

Have you ever used textarea in your UI design to get text from user? (Ofcourse you must) :) You must have specified rows and cols attribute to define the height and width of the textarea, or by using CSS. By whatever mean you create your textarea, the width and height of the textarea is fixed. What if you want your user to change the width and height of the textarea or resize the textarea while she is entering the text?

You can simply do this by using following JavaScript. Actually this is a jQuery plugin that lets you resize the textarea at runtime.

Let us assume that following is your HTML code:

		jQuery textarea resizer plugin


jQuery TextAreaResizer plugin example

Simple textarea + Resizer bar (grippie)

In the above code the textarea is made re-sizable by using jQuery plugin. All you have to do is to include jquery.textarearesizer.js in your HTML document where you have the textarea and call .TextAreaResizer(); method.


Notice that we have passed class name .resizable in the jquery call $() and then called TextAreaResizer() method.


Click here to view online demo.


Click here to download textarearesizer plugin.


Leave a Reply

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


To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]