Home Tutorial Jquery Auto grow Text Area using jQuery plug-in

 
 

Share on Google+Share on Google+
Auto grow Text Area using jQuery plug-in
Posted on: August 11, 2010 at 12:00 AM
Advertisement
In this section, you will learn how to create a text area which auto grow on increment of the content using jQuery Plug-in.

Auto grow Text Area using jQuery plug-in

In this section, you will learn how to create a text area which auto grow on increment of the content using jQuery Plug-in. We fixed the height of text area to 70 pixels .The size of the window increase until you reach to 7th line of the text box . When you reach to that line , it's height stops increasing but you can add content as much as you want. The height can increment without limit by changing the below code's text area 'max-height' attribute to 'min-height' .

autoGrowTextArea.html

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Auto grow text Area</title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="autogrow Text Area/jquery.autogrow.js">
</script>

<script type="text/javascript">
$(document).ready (function() {

$('textarea.expandText').autogrow();

});
</script>
<style type="text/css">

textarea.expandText {
line-height: 10px;
}

</style>
</head>
<body>

No Min-Height and max-height 70Px
<textarea style="width: 300px; max-height: 70px;" class="expandText"
 name="myTextarea">
</textarea>

</body>
</html>

OUTPUT

When we reach to 7th line of the textbox :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Auto grow Text Area using jQuery plug-in:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 11, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com