autoExpand.js
Automatically expand a textarea as the user types.
JavaScript
/*!
* Automatically expand a textarea as the user types
* (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
* @param {Node} field The textarea
*/
function autoExpand (field) {
// Reset field height
field.style.height = 'inherit';
// Get the computed styles for the element
let computed = window.getComputedStyle(field);
// Calculate the height
let height =
parseFloat(computed.paddingTop) +
field.scrollHeight +
parseFloat(computed.paddingBottom);
field.style.height = height + 'px';
}
CSS
textarea {
min-height: 5em;
max-height: 50vh;
width: 100%;
}