Skip to main content Accessibility Feedback

Automatically expand a textarea as the user types using vanilla JavaScript

Tommy Hodgins shared a really neat little helper function with me that automatically expands a textarea as the user types in.

I made a few modifications to simplify it down a bit, and wanted to share it with you and how it works.

The HTML #

All you need in the way of markup for this is a humble textarea element.

<textarea></textarea>

The CSS #

I give my textarea’s just a little bit of styling.

A min-height ensures that at least a few lines of text show up to start. A max-height of 50vh ensures the text area will never grow bigger than the viewport. I also like to add a width of 100% so that the text area fills up the full width of the content area.

textarea {
    min-height: 5em;
    max-height: 50vh;
    width: 100%;
}

The JavaScript #

Here’s the fun part.

Listening for changes to textareas #

First, let’s setup an event listener to detect changes to our textarea element. We’ll use event delegation to listen to all input events and then filter out ones that aren’t on a textarea.

document.addEventListener('input', function (event) {
    if (event.target.tagName.toLowerCase() !== 'textarea') return;
}, false);

If the element is a textarea, we’ll call a new function we’re going to create, autoExpand(), and pass in the element as an argument using event.target.

document.addEventListener('input', function (event) {
    if (event.target.tagName.toLowerCase() !== 'textarea') return;
    autoExpand(event.target);
}, false);

Auto-expanding the textarea #

Now, we can setup our autoExpand() function.

var autoExpand = function (field) {
    // Do things...
};

First, we need to reset the height of the textarea so that we can calculate how tall the content is/should be.

var autoExpand = function (field) {

    // Reset field height
    field.style.height = 'inherit';

};

To calculate our height, we need to get both the height of the content, and any borders and padding on the textarea that will affect its overall height.

We’ll use window.getComputedStyle() to get styles for the textarea, and scrollHeight to calculate the height of the content itself.

We’ll run all of the values through parseInt() to convert them to integers, and then add them up to get our total element height.

    // Get the computed styles for the element
    var computed = window.getComputedStyle(field);

    // Calculate the height
    var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
                 + parseInt(computed.getPropertyValue('padding-top'), 10)
                 + field.scrollHeight
                 + parseInt(computed.getPropertyValue('padding-bottom'), 10)
                 + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

Finally, we’ll set the height of our element using the style property.

var autoExpand = function (field) {

    // Reset field height
    field.style.height = 'inherit';

    // Get the computed styles for the element
    var computed = window.getComputedStyle(field);

    // Calculate the height
    var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
                 + parseInt(computed.getPropertyValue('padding-top'), 10)
                 + field.scrollHeight
                 + parseInt(computed.getPropertyValue('padding-bottom'), 10)
                 + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

    field.style.height = height + 'px';

};

And that’s it! You can view a working demo here.

Browser Compatibility #

This will work in all modern browsers, and IE9 and up. Thanks Tommy!


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips