Tự động tăng chiều cao Textarea với JavaScript và CSS

Sử dụng JavaScript để thiết lập Textarea tự động mở rộng theo nội dung.

Các ví dụ minh họa cách thực hiện.

Ví dụ

<!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>

Kết quả

Kết quả như hình minh họa (textarea tự co giãn khi gõ).

Ví dụ 2

<!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>

Kết quả

Kết quả như hình minh họa.