Adjust width of input field to its input

by

In modern browser versions, CSS unit ch is also available. To my understanding, it is font-independent unit, where 1ch equals to width of character 0 (zero) in any given font.

Thus, something as simple as following could be used as resize function:

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}
input{ font-size:1.3em; padding:.5em; }
<input>

That example would resize “elem” to length of the value + 2 characters extra.

One potential problem with the unit ch is that in many fonts (i.e. Helvetica) the width of the character “m” exceeds the width of the character 0 and the character “i” is much narrower. 1ch is usually wider than the average character width, usually by around 20-30% according to this post.

Leave a Comment

tech