fit-textarea

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

Install

npm install fit-textarea

Setup

const fitTextarea = require('fit-textarea');

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 , in a few bytes.</li> <li><a href="https://github.com/fregante/delegate-it" title="null" rel="noopener noreferrer">delegate-it</a> - DOM event delegation, in <1KB. Can be used to attach one <code>fit-textarea</code> to many elements.</li> <li><a href="https://github.com/sindresorhus/refined-github" title="null" rel="noopener noreferrer">Refined GitHub</a> - Uses this module.</li> </ul> </section></jspm-packages-readme></details></main></section><footer><section class="maintainers"><h3>Collaborators</h3><ul><li><a href="https://www.github.com/fregante"><figure><img loading="lazy" alt="fregante" src="https://unavatar.io/opensource@bfred.it" width="75" height="75" /></figure></a></li></ul></section><section class="keywords"><h3>Keywords</h3><ul><li><a href="/search?keyword=automatic">#automatic</a></li><li><a href="/search?keyword=autoresize">#autoresize</a></li><li><a href="/search?keyword=autosize">#autosize</a></li><li><a href="/search?keyword=avoid scrollbar">#avoid scrollbar</a></li><li><a href="/search?keyword=event">#event</a></li><li><a href="/search?keyword=expand">#expand</a></li><li><a href="/search?keyword=fit to content">#fit to content</a></li><li><a href="/search?keyword=follow">#follow</a></li><li><a href="/search?keyword=height">#height</a></li><li><a href="/search?keyword=increase">#increase</a></li><li><a href="/search?keyword=input">#input</a></li><li><a href="/search?keyword=keypress">#keypress</a></li><li><a href="/search?keyword=resize">#resize</a></li><li><a href="/search?keyword=scale">#scale</a></li><li><a href="/search?keyword=stretch">#stretch</a></li><li><a href="/search?keyword=text area">#text area</a></li><li><a href="/search?keyword=vanilla">#vanilla</a></li><li><a href="/search?keyword=vertical">#vertical</a></li></ul></section></footer></section></jspm-packages-package> </jspm-packages> <script type="module"> import '@jspm/packages/package-dom'; </script> </body> </html>