yuanqing / Autosize Input
Licence: mit
🎈 Effortless, dynamic-width text boxes in vanilla JavaScript
Stars: ✭ 64
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
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
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
Svelte Input Mask
Input masking component for Svelte with simple API and rich customization
Stars: ✭ 56 (-12.5%)
Mutual labels: input
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
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
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
Usage
<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
totrue
. This will give theelement
amin-width
that fits it initial contents (ie. either the element’s intialvalue
, or itsplaceholder
).
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 everyinput
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
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].