
- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Auto Grow a Textarea with JavaScript in CSS
Using JavaScript, we can set our Textarea element to automatically grow with its content
The following examples illustrate how we can achieve the above scenario.
Example
<!DOCTYPE html> <html> <head> <style> * { margin: 3%; color: navy; font-size: 1.2em; } #ta { padding: 2%; resize: none; width: 330px; min-height: 80px; overflow: hidden; box-sizing: border-box; } </style> </head> <body> <form> <label for="ta">Cool TextArea</label> <textarea id="ta"></textarea> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $("#ta").on('input', function() { var scroll_height = $("#ta").get(0).scrollHeight; $("#ta").css('height', scroll_height + 'px'); }); </script> </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> div { margin: 3%; overflow-y: scroll; } #ta { padding: 2%; resize: none; width: 333px; min-height: 90px; overflow: hidden; box-sizing: border-box; font-size: 1.5em; } </style> </head> <body> <div> <textarea id="ta"></textarea> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $("#ta").on('input', function() { var scroll_height = $("#ta").get(0).scrollHeight; $("#ta").css('height', scroll_height + 'px'); }); </script> </body> </html>
Output
This will produce the following result −
- Related Questions & Answers
- CSS flex-grow property
- Animate CSS flex-grow property
- CSS overflow: auto
- Role of margin property with value auto using CSS
- Clear text from textarea with selenium.
- Prettify JSON data in textarea input in JavaScript?
- How to grow a thick beard?
- Set how much a flex item will grow relative to the rest of the flex items with CSS
- Usage of CSS grid-auto-rows property
- Usage of CSS grid-auto-columns property
- Usage of CSS grid-auto-flow property
- Animating a Lightbox with CSS & JavaScript
- Make HTML text input field grow as I type in JavaScript?
- Can we display a JTabPane with TextArea in one of the tabs with Java
- Bootstrap Form TextArea
Advertisements