How to calculate the width of an input HTML elemen

Question

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).

Answer 1

You could use a (hidden) canvas and the measureText() method of the context to get your string's width.

EDIT:

Looks fast enough.

Answer 2

First, define some CSS...

input,
#input-helper {
    display: inline;
    font-size: 14px;
    font-family: serif;
    line-height: 16px;
}

#input-helper {
    position: absolute;
    top: -10000px;
}

...then use some JavaScript...

var div = document.createElement("div");
div.id = "input-helper";
document.body.appendChild(div);

var input = document.querySelector("input");

input.addEventListener("keyup", function() {
    div.textContent = this.value;
    input.style.width = div.offsetWidth + "px";
});​

jsFiddle.

You will want to choose a reasonable start width for your input element too.

Answer 3

If using jQuery is not a problem, here is a demo I put together on jsFiddle. It uses an Autoexpand.js file that does what you want. Check out the last example in the fiddle.

Some specifics:

1. It's based on .keyup and .keypress for the fastest response possible.
2. It takes into account the HTML markup that's pasted into the box. Things like linebreaks are dealt with.
3. The source file shows smart processing by taking everything about the font into consideration.

Also included in the jsFiddle are links to download a pastebin version of the fiddle since jsFiddle Sandbox breaks in IE8. That said, it also works in IE7 too!

Answer 4

First : Add this div where you want

<div id="calcsize" style="display:none;"></div>

Second : Use this function

function getWidthof(txt)
{
    $('#calcsize').empty().append(txt);
    return $('#calcsize').width();
}