8

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

JB Hurteaux
  • 4,428
  • 6
  • 32
  • 35

4 Answers4

4

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

EDIT:

Looks fast enough.

dda
  • 6,030
  • 2
  • 25
  • 34
  • Canvas not supported by IE8 I'm afraid (please do not ask why I have to support IE8). However, I'm curious as to how efficient/fast this would be. Would it perform fast enough for onkeyup? – JB Hurteaux May 31 '12 at 13:42
3

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.

alex
  • 479,566
  • 201
  • 878
  • 984
  • ok, clever. But a bit unsure if this will be fast enough. onkeyup can be fired quite a few time in 1 second. Will test. – JB Hurteaux May 31 '12 at 13:48
  • +1 for creating an excellent method to use. For my taste, changing `"px"` to `+ 15 + "px"` makes the text [less jumpy](http://jsfiddle.net/Y5vAe/1/). The answer I provided might be overkill, but the 2kb source file is also based on `.offsetWidth` as well. Cheers! – arttronics Jun 02 '12 at 07:41
2

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!

dda
  • 6,030
  • 2
  • 25
  • 34
arttronics
  • 9,957
  • 2
  • 26
  • 62
0

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();
}
aDDin
  • 53
  • 3