How to calculate the width of an input HTML element so that it matches the size of its content?
auto-update, css, html, input, javascript
Solution
You could use a (hidden) canvas and the `measureText()` method of the context to get your string's width.
EDIT:
Looks fast enough.
Problem
How to calculate the width of an input HTML element so that it matches the size of its content ? I already update an input on the fly as the user types : ``` <input type='text' onkeydown='this.size=this.value.length' /> ``` However, this does not seem completely correct because it does not take into account the fact that some characters are longer than others : - I will get more and more whitespace if I type only some "l" characters - the size will be insufficient if I type only some "w" characters How to proceed? PS: Why I want to do this (already answered this in a answer that was deleted)? I have sentences in which I have to replace the bracket content by inputs (ex: [user] is [years] old). I have no idea what the sentence can be, so I do not know an adequate length for the inputs, and I would like to keep it readable on one line (avoiding too much whitespace).