Auto-Expanding Textarea

A fixed-height textarea with a scrollbar is one of the more uncomfortable UX patterns in web forms. The flexibleTextarea jQuery plugin solves this by automatically growing the textarea vertically as the user types, so the full content is always visible without scrolling. It's especially useful for comment forms, message inputs, and any field where the amount of text is unpredictable.

Basic Usage

Call the plugin on any textarea element after the DOM is ready:

$(document).ready(function() {
    $('textarea').flexibleTextarea({
        minHeight: 60,
        maxHeight: 400,
        lineHeight: 20
    });
});

Parameters

• minHeight — The minimum height of the textarea in pixels. The field will never shrink below this value even when empty. Default: 60.
• maxHeight — The maximum height in pixels before the textarea stops growing and shows a scrollbar instead. Set to 0 for unlimited height. Default: 400.
• lineHeight — The line height used for calculating how tall the content is. Should match the line-height CSS value on the textarea. Default: 20.

How It Works

The plugin creates a hidden <div> that acts as a mirror of the textarea — it has identical width, font, padding, and line-height. On every keyup and paste event, the current text content is copied into this hidden clone. The clone's natural height (its scrollHeight) reflects exactly how much vertical space the text requires.

The plugin then animates the visible textarea to match the clone's height, clamped between minHeight and maxHeight. Because the measurement is done on a hidden element rather than the textarea itself, there are no layout jumps or flickering during the resize.

Listening to both keyup and paste ensures the textarea resizes whether the user is typing character by character or pasting a large block of text at once.

Demo

Try it yourself: Live demo — flexibleTextarea.