There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes back as the full size of the textarea, not its contents.
The code from that page is below:
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if ( !text )
return;
var adjustedHeight = text.clientHeight;
if ( !maxHeight || maxHeight > adjustedHeight )
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if ( maxHeight )
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ( adjustedHeight > text.clientHeight )
text.style.height = adjustedHeight + "px";
}
}
window.onload = function() {
document.getElementById("ta").onkeyup = function() {
FitToContent( this, 500 )
};
}
48 Answers
A COMPLETE YET SIMPLE SOLUTION
Updated 2020-05-14 (Improved browser support for mobiles and tablets)
The following code will work:
- On key input.
- With pasted text (right click & ctrl+v).
- With cut text (right click & ctrl+x).
- With pre-loaded text.
- With all textarea's (multiline textbox's) site wide.
- With Firefox (v31-67 tested).
- With Chrome (v37-74 tested).
- With IE (v9-v11 tested).
- With Edge (v14-v18 tested).
- With IOS Safari.
- With Android Browser.
- With JavaScript strict mode.
- Is w3c validated.
- And is streamlined and efficient.
OPTION 1 (With jQuery)
This option requires jQuery and has been tested and is working with 1.7.2 - 3.6
Simple (Add this jquery code to your master script file and forget about it.)
$("textarea").each(function () {
this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
});<script src=""></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
