Auto-Resizing Textareas with ECMAScript 6

We recently added auto-resizing textarea elements to our service and here’s how we managed to do that with just a few lines of code in JavaScript.

ES6 Classes

Our complete JavaScript code is written in ECMAScript 6 Classes. We don’t use any library such as React.js, vue.js or similar but instead write plain JavaScript. Until now we don’t have the need to add a big framework and our codebase yet is very tidy due to the usage of new language features. To ensure we are compatible with older browsers, we use Bublé — a faster alternative to the Babel transpiler.

To ensure we don’t create a mixed, universal codebase but incorporate a separation of concerns — similar to what most people know from Scss partials — we use ES6 Classes and then bind them in our initializing script to specific DOM selectors. It’s nothing else than most of us use every day when working with RequireJS, Browserify, AMD, UMD or similar methods, just it’s a web standard and offers much more convenience and flexibility. One nice thing — for example — is that it’s easy to extend Classes, a feature known from PHP and other languages already and very useful to extend functionality of third-party code.

Resize A Form Field

First of all we need to write the function that contains the logic for resizing the element when a user enters more text than the current height of the field allows:

textareaDidChange() {
	this.element.style.height = 'auto';
	this.element.style.height = this.element.scrollHeight + 'px';
}

Yes, it’s that simple. Now let’s call see how we call the function in our Class and initialize it:

/**
 * Auto Resizing for Textarea Elements.
 *
 * This automatically resizes textarea elemens when the content gets
 * longer than the initial height of the element to ease writing for users.
 */
export default class TextareaAutoResize {
	constructor( element ) {
		this.element = element;
		this.element.addEventListener( 'input', this.textareaDidChange.bind( this ) );

		this.textareaDidChange();
	}

	/**
	 * Applies the scrollHeight to the element if content exceeds, otherwise 'auto'.
	 */
	textareaDidChange() {
		this.element.style.height = 'auto';
		this.element.style.height = this.element.scrollHeight + 'px';
	}
}

That’s all. There’s one little detail in there: We first add the Event Listener and then call the function once afterwards. We do this to ensure the height is set properly on load as well. Think about entering a lot of text and reload the browser window. With this additional call, the height is set properly in such cases as well.

You now only need to import your module in your entry point file and bind it to a set of DOM elements:

import TextareaAutoResize from "./TextareaAutoResize.js";

document.addEventListener('DOMContentLoaded', function() {
	const textareaElements = document.querySelectorAll('textarea');
	for (const textareaElement of textareaElements) {
		new TextareaAutoResize( textareaElement );
	}
});