javascript - How to calculate the width of an input HTML element so that it matches the size of its content? - Stack Overflow

admin管理员组

文章数量:1279243

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

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

• javascript
• html
• css
• input
• auto-update

Share Improve this question Follow edited May 31, 2012 at 13:38 JB Hurteaux asked May 31, 2012 at 12:36 JB HurteauxJB Hurteaux 4,55866 gold badges3434 silver badges3535 bronze badges 5

• 2 Why do you want this in the first place? Maybe there's an easier workaround – Pekka Commented May 31, 2012 at 12:39
• onkeydown wouldn't catch pasting via a mouse click – user391538 Commented May 31, 2012 at 12:59
• @Pekka Question edited. See above. – JB Hurteaux Commented May 31, 2012 at 13:39
• @TonyBlundell I know, need to fine-tune this. Thanks anyway. – JB Hurteaux Commented May 31, 2012 at 13:40
• Ah, I see. There is a duplciate of this somewhere on SO that IIRC even had a nice code sample, but I can't find it right now... – Pekka Commented May 31, 2012 at 13:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

EDIT:

Looks fast enough.

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.

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!

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();
}

本文标签：