Auto grow Text Area using jQuery plug-in
Posted on: August 11, 2010 at 12:00 AM
Posted on: August 11, 2010 at 12:00 AM
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 :
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
