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.
You can see the live demo and download the code from below.
How to resize the textarea automatically according to content? You may follow some steps to resize it. These Steps are:
Open your code editor.
Write the below code for giving the automatic resizing functionality to your textarea.
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> |
<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>
I have one function to resize the height when more content is there inside the textarea. What am I doing inside function ?
<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> |
<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>
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.
Read About Other Interesting Things about jquery below.
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
Leave a Reply