All Projects → yuanqing → Autosize Input

yuanqing / Autosize Input

Licence: mit
🎈 Effortless, dynamic-width text boxes in vanilla JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Autosize Input

Vue Formulate
⚡️ The easiest way to build forms with Vue.
Stars: ✭ 1,947 (+2942.19%)
Mutual labels:  forms, input
Awesomevalidation
Android validation library which helps developer boil down the tedious work to three easy steps.
Stars: ✭ 1,093 (+1607.81%)
Mutual labels:  forms, input
Customui
Library to create custom UI's in MCPE 1.2+
Stars: ✭ 60 (-6.25%)
Mutual labels:  forms, input
Tags Input
🔖 <input type="tags"> like magic
Stars: ✭ 312 (+387.5%)
Mutual labels:  input, dom
svelte-multiselect
Keyboard-friendly, accessible and highly customizable multi-select component
Stars: ✭ 91 (+42.19%)
Mutual labels:  input, forms
Validation
Framework agnostic validation library for PHP
Stars: ✭ 146 (+128.13%)
Mutual labels:  forms, input
Input Value
React hook for creating input values
Stars: ✭ 104 (+62.5%)
Mutual labels:  forms, input
insect
🛠 Highly customisable, minimalistic input x select field for React.
Stars: ✭ 33 (-48.44%)
Mutual labels:  input, forms
hookahjs
Add empty/dirty/touched CSS hooks to input and textarea elements automatically (1056 bytes)
Stars: ✭ 21 (-67.19%)
Mutual labels:  input, forms
Form Js
Easily create web forms. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.
Stars: ✭ 9 (-85.94%)
Mutual labels:  forms, input
Scalajs Bootstrap
Scala.js bootstrap components
Stars: ✭ 55 (-14.06%)
Mutual labels:  dom
Svelte Input Mask
Input masking component for Svelte with simple API and rich customization
Stars: ✭ 56 (-12.5%)
Mutual labels:  input
React Router Form
<Form> is to <form> as <Link> is to <a>
Stars: ✭ 58 (-9.37%)
Mutual labels:  forms
Material Ui Password Field
A password field using Material-UI.
Stars: ✭ 54 (-15.62%)
Mutual labels:  input
Rff Cli Example
An example of how to use 🏁 React Final Form in a CLI application with Ink
Stars: ✭ 55 (-14.06%)
Mutual labels:  forms
Dom
DOM Standard
Stars: ✭ 1,114 (+1640.63%)
Mutual labels:  dom
Boltforms
Bolt Forms extension - Symfony interface and API for Bolt
Stars: ✭ 53 (-17.19%)
Mutual labels:  forms
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-4.69%)
Mutual labels:  input
Sentineljs
Detect new DOM nodes using CSS selectors (650 bytes)
Stars: ✭ 1,100 (+1618.75%)
Mutual labels:  dom
Browser Monkey
Reliable DOM testing
Stars: ✭ 53 (-17.19%)
Mutual labels:  dom

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 element’s 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 element’s 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].