1.0.2 • Published 6 years ago

autosize-input v1.0.2

Weekly downloads
5,896
License
MIT
Repository
github
Last release
6 years ago

autosize-input npm Version Build Status

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 elements initial content
  • 718 bytes gzipped

Usage

Editable demo (CodePen)

<input type="text" id="foo" value="Nice">
<input type="text" id="bar" placeholder="People">
<input type="text" id="baz" placeholder="Matter">
const autosizeInput = require('autosize-input')

autosizeInput(document.querySelector('#foo'))
autosizeInput(document.querySelector('#bar'))
autosizeInput(document.querySelector('#baz'), { minWidth: true })

API

const autosizeInput = require('autosize-input')

autosizeInput(element , options)

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.
  • If we do not want the text box to contract as the user starts to type, set options.minWidth to true. This will give the element a min-width that fits it initial contents (ie. either the elements intial value, or its placeholder).

See Usage.

Implementation details

  • 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.
  • The single ghost div is shared amongst all the autosized text boxes on the page.

Installation

Install via yarn:

$ yarn add autosize-input

Or npm:

$ npm install --save autosize-input

Tests

To test manually, in the browser:

$ yarn start

To run the programmatic tests:

$ yarn test

Prior art

This module was written because I needed a standalone, lightweight solution to this rather UI problem.

License

MIT