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: 
<html>
 <head>
  <title>jQuery textarea resizer plugin</title>
  
  
  <script type="text/javascript">
   /* jQuery textarea resizer plugin usage */
   $(document).ready(function() {
    $('textarea.resizable:not(.processed)').TextAreaResizer();
   });
  </script>
  <style type="text/css">
   div.grippie {
    background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
    border-color:#DDDDDD;
    border-style:solid;
    border-width:0pt 1px 1px;
    cursor:s-resize;
    height:9px;
    overflow:hidden;
   }
   .resizable-textarea textarea {
    display:block;
    margin-bottom:0pt;
    width:50%;
    height: 30%;
   }
  </style>

 </head>
 <body>
  <h1>jQuery TextAreaResizer plugin example</h1>
  <h2>Simple textarea + Resizer bar (grippie)</h2>
<textarea rows="5" class="resizable">some test text
some test text
some test text
some test text
some test text
some test text
</textarea>

 </body>
</html>

Code language: HTML, XML (xml)
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. 
$('textarea.resizable:not(.processed)').TextAreaResizer();

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

Demo

Click here to view online demo.

Download

Click here to download textarearesizer plugin.

View Comments

Leave a Comment
Share
Published by
Viral Patel
Tags: JQuery jquery plugin text area resize javascript textarea textarea resize
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago