JavaScript का उपयोग करके, हम अपने टेक्स्टएरिया एलिमेंट को उसकी सामग्री के साथ स्वचालित रूप से बढ़ने के लिए सेट कर सकते हैं।
निम्नलिखित उदाहरण दर्शाते हैं कि हम उपरोक्त परिदृश्य को कैसे प्राप्त कर सकते हैं।
उदाहरण
<!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>आउटपुट
यह निम्न परिणाम देगा:
उदाहरण
<!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>आउटपुट
यह निम्न परिणाम देगा:
