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
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:

autoinput-size

Suggest a module

Comments