jQuery textarea autosize plugin

• Tweet

• Tweet

Hello,

I developed this plugin for fun to understand how scrollHeight property of an element works and what results it give in different browsers.

I will split this post into 5 sections

• Introduction
• HTML and CSS
• jQuery plugin code
• Usage
• Demo

Introduction

This is real simple approach to the problem in hand. Problem is that while user is typing our textarea’s height should increase automatically to the number of lines user has typed + a new line. There are a few plugins of this nature that exist and all of them has their own logic and all of them are good too. What you are going to see below is a minimalistic approach to solve this problem. You can extend the code to whatever level to make it do fancy things.

A screenshot of an expanded textarea is shown below

Ok so you get the idea.

The HTML

For our example we will consider the markup shown below

<textarea class="testMaxHeight" cols='20' rows='5'></textarea>  Max Height (250px)<br>
<textarea class="testNoScroll" cols='10' rows='5'></textarea> Infinite height growth

The CSS

CSS styles that are used in this plugin are inline styles only. That too are sort of not required at all, but I just put them there any way. CSS properties can be accessed through plugin’s settings object. I will get to that in a second.

The jQuery Code

This plugin source is hosted on code.google.com and can be found here

http://code.google.com/p/jcautosize/

Just click on the download tab and download the latest version.

Usage

This plugin comes with these options

• padding: ’5px’,
  This is default padding for your text area
• lineHeight: ’100%’,
  This could be in pixels too but I doubt you will change this.
• height: ’50px’
  Default height of your textarea
• width: ’400px’,
  Default width of your text area
• border: ’3px solid #CCC’,
  Border style of your text area.
• borderRadius:’5px’,
  The default border radius of your text area
• boxShadowColor:‘rgba(4, 174, 174, 0.7)’,
  This is box shadow color your would like to give your textarea
• applyCSS:true, /*all above rules will be applied*/
  No CSS rule will be applied except height and width on your text areas
• maxHeight:250,
  This is the maximum height your textarea should grow to. if this value is less that original box height then it will not be applied. To disable this value just put value as ZERO (in number)
• extraTail: default value is 5
  in pixels. extra space to get rid of line flicker, this value should be zero if padding is good enough or this value should be increased if padding is set to zero

$(document).ready(function() {	
       jQuery('textarea.testMaxHeight').jcautosize({            
              boxShadowColor:'rgba(174, 4, 174, 0.7)',
              maxHeight:250
       });
       jQuery('textarea.testNoScroll').jcautosize({            
              boxShadowColor:'rgba(4, 174, 174, 0.7)',
              maxHeight:0        
       });
 });

Demo

Demo for this plugin is located here

http://jaspreetchahal.org/examples/jquery-examples/jquery-textarea-autosize-plugin-example.html

Tested on latest

Donations

This is important bit. I generally fund my own stuff only except my Tea and Coke. So if you are interested donating a penny for my work. Consider donations! I don’t get many because generally people skip this part and go directly to downloads but its always worth asking.

I hope that you will like this plugin. If you have any questions or doubts please let me know. You can always improve the code I’ve written because generally first iteration is a bit crappy always.

Cheers.