javascript - Growing text box based on width of characters input - Stack Overflow

admin管理员组

文章数量:1320164

I am trying to create a text box that grows every time a letter is added to it by the width of the character. This is what I'm trying. It doesn't work. If you've got a hint, please share!

JavaScript:

function MakeWidth(el) {
        el.style.width = parseFloat(el.value.clientWidth) }

HTML:

<input id="Test" type="text" style="width: 10px;" onkeyup="MakeWidth(this)"/>

I am trying to create a text box that grows every time a letter is added to it by the width of the character. This is what I'm trying. It doesn't work. If you've got a hint, please share!

JavaScript:

function MakeWidth(el) {
        el.style.width = parseFloat(el.value.clientWidth) }

HTML:

<input id="Test" type="text" style="width: 10px;" onkeyup="MakeWidth(this)"/>

• javascript
• html

Share Improve this question Follow asked Nov 13, 2011 at 19:52 Michael SwartsMichael Swarts 3,92188 gold badges3636 silver badges4646 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Try size & length instead of clientWidth & width

http://jsfiddle/eVd9b/5/

function MakeWidth(el) {
    el.size = parseInt(el.value.length);
}

which should be suitable for your needs.

It may be more useful to use the size attribute.

<input id="Test" type="text" size="1" onkeyup="MakeWidth(this)"/>
<script>
function MakeWidth(el) {
        el.size = el.value.length

}
</script>

That's a bit tricky since you don't necessarily know the width of each character. One little trick that es to mind is that you could try creating a hidden div with the typed character, grab it's width, add it to the textbox width and destroy the hidden div.

本文标签： javascriptGrowing text box based on width of characters inputStack Overflow