Effortless, dynamic-width text boxes in vanilla JavaScript.
npm install autosize-input> Effortless, dynamic-width text boxes in vanilla JavaScript.
- Dynamically adjusts the width of the text box to fit its current contents
- Can be initialised to fit its placeholder attribute
- Optionally set a min-width based on the element’s initial content
- 718 bytes gzipped
``html`
`js
const autosizeInput = require('autosize-input')
autosizeInput(document.querySelector('#foo'))
autosizeInput(document.querySelector('#bar'))
autosizeInput(document.querySelector('#baz'), { minWidth: true })
`
`js`
const autosizeInput = require('autosize-input')
element is a text input element, and options is an object literal.
- Returns a “clean up” function for removing the event listener on the element.options.minWidth
- If we do not want the text box to “contract” as the user starts to type, set to true. This will give the element a min-width that fits it initial contents (ie. either the element’s intial value, or its placeholder).
See Usage.
- A hidden “ghost” div element, assigned the same styles as the text box, is used to calculate the correct width to assign to the text box. This width is recomputed and assigned to the text box on every input event.div
- The single “ghost” is shared amongst all the “autosized” text boxes on the page.
Install via yarn:
`sh`
$ yarn add autosize-input
Or npm:
`sh`
$ npm install --save autosize-input
To test manually, in the browser:
`sh`
$ yarn start
To run the programmatic tests:
`sh``
$ yarn test
- jQuery.Autosize.Input
- React-Input-Autosize
This module was written because I needed a standalone, lightweight solution to this rather UI problem.