Skip to main content Accessibility Feedback

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%;
}