根据字符输入的宽度增长文本框

时间:2011-11-13 19:52:08

标签: javascript html

我正在尝试创建一个文本框,每次按字符宽度添加字母时,该文本框都会增长。这就是我正在尝试的。它不起作用。如果您有提示,请分享!

JavaScript的:

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

HTML:

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

3 个答案:

答案 0 :(得分:7)

试试size&amp; length代替clientWidth&amp; width

http://jsfiddle.net/eVd9b/5/

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

应该适合您的需要。

答案 1 :(得分:3)

使用size属性可能更有用。

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

}
</script>

答案 2 :(得分:1)

这有点棘手,因为你不一定知道每个角色的宽度。想到的一个小技巧是,您可以尝试使用键入的角色创建隐藏的div,抓住它的宽度,将其添加到文本框宽度并销毁隐藏的div。