Due to the fact that the HTML <textarea>
element does not automatically grow to fit its content, many developer look for plugins and scripts to enable this feature. This bit of JavaScript will cause any applicable <textarea>
elements to resize automatically to fit the content typed or pasted into it.
The code has the following features:
- Uses a hidden clone element (a
<div>
) that has the same typographical properties as the<textarea>
- Has no dependencies (e.g. jQuery)
- Will autosize any
<textarea>
that has a class oftxta
- Works in all browsers, even old IE
Here’s the HTML:
<textarea placeholder="Type multiple lines of content here." class="txta"></textarea>
Code language: HTML, XML (xml)
Here’s the CSS:
.txta {
width: 100%;
max-width: 500px;
min-height: 100px;
font-family: Arial, sans-serif;
font-size: 16px;
overflow: hidden;
line-height: 1.4;
}
Code language: CSS (css)
And the JavaScript (commented):
// Targets all textareas with class "txta"
let textareas = document.querySelectorAll('.txta'),
hiddenDiv = document.createElement('div'),
content = null;
// Adds a class to all textareas
for (let j of textareas) {
j.classList.add('txtstuff');
}
// Build the hidden div's attributes
// The line below is needed if you move the style lines to CSS
// hiddenDiv.classList.add('hiddendiv');
// Add the "txta" styles, which are common to both textarea and hiddendiv
// If you want, you can remove those from CSS and add them via JS
hiddenDiv.classList.add('txta');
// Add the styles for the hidden div
// These can be in the CSS, just remove these three lines and uncomment the CSS
hiddenDiv.style.display = 'none';
hiddenDiv.style.whiteSpace = 'pre-wrap';
hiddenDiv.style.wordWrap = 'break-word';
// Loop through all the textareas and add the event listener
for(let i of textareas) {
(function(i) {
// Note: Use 'keyup' instead of 'input'
// if you want older IE support
i.addEventListener('input', function() {
// Append hiddendiv to parent of textarea, so the size is correct
i.parentNode.appendChild(hiddenDiv);
// Remove this if you want the user to be able to resize it in modern browsers
i.style.resize = 'none';
// This removes scrollbars
i.style.overflow = 'hidden';
// Every input/change, grab the content
content = i.value;
// Add the same content to the hidden div
// This is for old IE
content = content.replace(/\n/g, '<br>');
// The <br ..> part is for old IE
// This also fixes the jumpy way the textarea grows if line-height isn't included
hiddenDiv.innerHTML = content + '<br style="line-height: 3px;">';
// Briefly make the hidden div block but invisible
// This is in order to read the height
hiddenDiv.style.visibility = 'hidden';
hiddenDiv.style.display = 'block';
i.style.height = hiddenDiv.offsetHeight + 'px';
// Make the hidden div display:none again
hiddenDiv.style.visibility = 'visible';
hiddenDiv.style.display = 'none';
});
})(i);
}
Code language: JavaScript (javascript)
The HTML in the demo also includes a commented-out second <textarea>
element that you can uncomment to test multiple textareas on the same page.