Automatic Resize Textarea Based On Content Length Using Jquery

Automatic Resize Textarea Based On Content Length Using Jquery: Hi friends, Today I will tell you about automatic resizing of the textarea when content is increased inside the textarea. It is very necessary for your website because when any user write anything in the textarea box it shows a scroll bar and it hide some of content too. To see all the text inside textarea you have to resize the textarea when any user or visitor write anything in the textarea.

We are using textarea for different purpose in which resizing is necessary just like message box, comment box, Primary or secondary address, Permanent Address, Temporary Address or write more text which is not fit in the one line or text input boxes.

Automatic Resize Textarea Based On Content Length Using Jquery Live Demo:

You can see the live demo and download the code from below.

Automatic Resize Textarea Based On Content Length Using Jquery:

How to resize the textarea automatically according to content? You may follow some steps to resize it. These Steps are:

Step1:

Open your code editor.

Step2:

Write the below code for giving the automatic resizing functionality to your textarea.

Html Code:

In the Html code I have made 2 textarea inside one div to show the resize functionality.

<div id="auto-text-area">
    <textarea>Try to write anything and you can see your textbox height is increased according to your content area and it is fit into the textarea</textarea><br/>
    <textarea>Add
or
remove
a
line
According
to
Your 
Requirement</textarea>
</div>

Jquery Code:

I have one function to resize the height when more content is there inside the textarea. What am I doing inside function ?

• Select the id of div inside window load function
• Using some event like change, keyup, keydown, paste or cut in textarea
• Initially height is 0.
• When content is increasing function find the textarea and increase the height appropriately.

<script type='text/javascript'>
$(window).load(function(){
$('#auto-text-area').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();
});
</script>

Step3:

After Pasting the code you can check your project in any modern browser

For any problem you can see the live demo and download the code from below.

Note: Dont Forget to add jquery library.

Now you know about How To Automatic Resize Textarea Based On Content Length Using Jquery

Read About Other Interesting Things about jquery below.

• Sliding Div When Scroll Down Page Using Jquery
• Disable Mouse Right Click Using Jquery
• Responsive Jquery Read More Feature Without Plugin
• Marquee Animation Without Marquee tag
• Add 3D Menu Effects To Your Website Using Jquery
• Rumbles, Vibrates, Shakes, And Rotates Any Element Using Jquery Plugin
• Fancy Effects To Input Fields Using Jquery Plugin
• Add Diwali Fireworks Using Jquery In Your Website
• Zoom Image On Hover Using CSS Without Jquery
• Pure HTML CSS Slider Without JavaScript or Jquery
• Create Country State And City Dropdown Using Jquery
• Learn JQUERY Code Step By Step For Beginners
• Create Expand Collapse Sliding Menu Using jQuery
• Jquery Me Simple Slider Kaise Bnate Hai
• Add CKEditor in Html Form using Jquery
• Avoid Spammers With Motion CAPTCHA Using JQuery
• Stop Double Form Submission Using Jquery and Ajax
• Simple Text Slider Using Jquery Slide Function

I hope you will like Automatic Resize Textarea Based On Content Length Using Jquery. If You found it useful please subscribe my blog.

Categories: Website Design