fregante / fit-textarea

Automatically expand a <textarea> to fit its content, in a few bytes

fit-textarea

Automatically expand a <textarea> to fit its content, in a few bytes

Try the demo!

Features:

• Small
• No layout thrashing (no DOM changes unless necessary)
• You can set a minimum height (via rows attribute or height CSS property)
• If the field is resizable, the new size will be treated as minimum height

Install

npm install fit-textarea

Setup

// This module is only offered as a ES Module
import fitTextarea from 'fit-textarea';

<textarea rows="3">Use the rows attribute to set its minimum height</textarea>

Usage

Once, one element

const textarea = document.querySelector('textarea');
fitTextarea(textarea);

As the user types

One element

const textarea = document.querySelector('textarea');
fitTextarea.watch(textarea);

Array/NodeList/Iterable of elements

const textareas = document.querySelectorAll('textarea');
fitTextarea.watch(textareas);

With a selector

The selector is run once, so it's equivalent to the example above.

fitTextarea.watch('textarea');

Related

• indent-textarea - Add editor-like tab-to-indent functionality to <textarea>, in a few bytes.
• delegate-it - DOM event delegation, in <1KB. Can be used to attach one fit-textarea to many elements.
• Refined GitHub - Uses this module.