Package Exports

autosize-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (autosize-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

autosize-input.js

Effortless, dynamic-width input elements in vanilla JavaScript.

Features

Dynamically adjusts the width of the text input element to fit its current contents
Can be initialised to fit the element’s placeholder attribute
Optionally set a min-width based on the element’s initial content
Super lightweight; just 1 KB minified, or 0.57 KB minified and gzipped

Under the hood, autosize-input uses a hidden “dummy” div (with the same font-size and font-family as the original input element) to determine the correct width to assign to the input element.

Usage

Editable demo

<body>
  <input type="text" id="foo" value="Nice">
  <input type="text" id="bar" placeholder="People">
  <input type="text" id="baz" placeholder="Matter">
  <script src="../autosize-input.min.js"></script>
  <script>
    autosizeInput(document.querySelector('#foo'));
    autosizeInput(document.querySelector('#bar'));
    autosizeInput(document.querySelector('#baz'), { minWidth: true });
  </script>
</body>

API

In the browser, autosizeInput is a global variable. In Node, do:

var autosizeInput = require('autosize-input');

autosizeInput(elem [, opts])

elem is a text input element, and opts is an object literal.

If we do not want the text box to “contract” as the user starts to type, set opts.minWidth to true. This will give elem a min-width that fits it initial contents (ie. either the element’s intial value, or its placeholder).

See Usage.

Installation

Install via npm:

$ npm i --save autosize-input

Install via bower:

$ bower i --save yuanqing/autosize-input

Prior art

I wrote autosize-input because I needed a standalone, lightweight solution to this rather common UI problem.

License

MIT