Javascript Shortest Code to Shrink/Expand Textarea to Content

Javascript Function Code to Expand/Shrink to Fit Content Inside. 3 Ways to Use this Textarea Auto Size Adjust Code [1] If you Only Need to Resize Content on Page Load. [2] If you

This first example is for situations where you want to expand/shrink height of textarea initially AND allow the textarea to resize as/if content is entered after page load.

/* ----------------------------------------------------- auto shrink/expand textarea height based upon content ----------------------------------------------------- */ document.querySelectorAll("textarea").forEach((ta) => { // set initial height for intial textarea content ta.style.height = "auto"; ta.style.overflow = "hidden"; ta.style.height = ta.scrollHeight + "px"; // textarea expands/shrink to new content ta.addEventListener("input", function(){ ta.style.height = "auto"; ta.style.overflow = "hidden"; ta.style.height = ta.scrollHeight + "px"; }); });

If you only care to shrink/expand textarea as content is entered ...

/* ------------------------------------------------------ shrink/expand textarea height to ajust to new content ------------------------------------------------------ */ document.querySelectorAll("textarea").forEach((ta) => { // textarea expands/shrink to new content ta.addEventListener("input", function(){ ta.style.height = "auto"; ta.style.overflow = "hidden"; ta.style.height = ta.scrollHeight + "px"; }); });

If you don't plan on the textareas content to change after page load ...

/* ------------------------------------------------------ shrink/expand textarea height to ajust to new content ------------------------------------------------------ */ document.querySelectorAll("textarea").forEach((ta) => { ta.style.height = "auto"; ta.style.overflow = "hidden"; ta.style.height = ta.scrollHeight + "px"; });

This textarea autosizing code has been applied to the textareas on this page so go ahead and add or remove content either by typing or pasting and watch the textareas expand to fit the content.