Autosize-input
autosize-input
Effortless, dynamic-width text boxes.
Features:
- 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
Get it: npm install -g autosize-input
Usage:
1 2 3 4 5 |
|
Implementation details:
The
box-sizing
property of the given text box is set, inline, tocontent-box
. Therefore, the width we assign to our text box excludes itspadding
andborder
properties.A hidden “ghost”
div
— given the samefont-size
andfont-family
as the text box — is used to compute 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” element is shared amongst all the “autosized” text boxes on the page.
GIF FTW: