LeaVerou/stretchy

Features

• Handles multiple types of form controls Textareas? Inputs? Select menus? You name it!
• Tiny footprint Less than 1.5KB minified and gzipped!
• Automatically accounts for newly added controls via mutation observers
• Restrict form controls by a selector …or don’t and autosize all your form controls!
• Completely standalone no jQuery or other dependencies
• Plays well with existing HTML/CSS Follows placeholders, styling, min/max-width/height constraints, transitions
• No JS knowledge required Everything can be configured just via HTML!
• Works in all modern browsers (v1 even works in old browsers)
• Written in ESM Available in ESM, CJS, and good ol' globals
• Works in Shadow DOM Use it in your web components!

Usage

<script src="https://stretchy.verou.me/dist/stretchy.iife.min.js" async></script>

import * as Stretchy from "https://stretchy.verou.me/dist/stretchy.min.js";
Stretchy.init();

npm install stretchy

Which elements does Stretchy resize?

By default, Stretchy resizes all <textarea>s, <select> menus with no size attribute and <input> elements that are text fields (e.g. with no type attribute, or with one equal to text, tel, email, url).

To limit that set further you can set an additional filter, via a CSS selector. There are two ways to specify a filter: via HTML attributes (if you'd prefer to avoid writing JS) or via JS.

Via HTML attributes:

Use the data-stretchy-filter attribute, on any element. Note that this means you can use the attribute on the <script> element that calls Stretchy itself, in which case you can also shorten its name to data-filter.

For example, to restrict it to elements that either have the foo class or are inside another element that does, you could use data-stretchy-filter=".foo, .foo *" on an element or call Stretchy like this:

<script src="stretchy.min.js" data-filter=".foo, .foo *" async></script>

If you specify the data-stretchy-filter attribute on multiple elements, the last value (in source order) wins. data-filter directly on Stretchy’s <script> element takes priority over any data-stretchy-filter declaration.

Via JS

If you want to avoid modifying the markup, you can use JavaScript instead:

Stretchy.selectors.filter = ".foo, .foo *";

Note that if you are including Stretchy via a <script> element, it will run as soon as the document is ready, which may be before you’ve set a filter. You need to ensure that line runs after Stretchy has loaded (so that the Stretchy object is available) and before the DOM is ready. To avoid this hassle, I'd recommend using attributes to set the filter if you include Stretchy that way, or including Stretchy as a module if you want to customize its settings via JS.

JavaScript API

Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX).

If needed, these are Stretchy’s API methods:

Browser support

All modern browsers. For details, see .browserslistrc

v1 Browser Support Notes

Stretchy v1 worked in Chrome, FF 3.6, IE9, Opera, Safari, Android & more.

• On browsers that do not support mutation observers, you have to manually call Stretchy.resize() on new elements.
• IE has an issue with <input> elements, due to it misreporting scrollWidth. If this matters to you, you can use this polyfill by Greg Whitworth (under development).