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

autosizeInput(document.querySelector('#foo'));

autosizeInput(document.querySelector('#bar'));

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

Implementation details:

• The box-sizing property of the given text box is set, inline, to content-box. Therefore, the width we assign to our text box excludes its padding and border properties.

• A hidden “ghost” div — given the same font-size and font-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 every input event.

• The single “ghost” element is shared amongst all the “autosized” text boxes on the page.

GIF FTW: