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

Question

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

JavaScript的：

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

HTML：

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

Answer 1

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

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

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

应该适合您的需要。

Answer 2

使用size属性可能更有用。

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

}
</script>

Answer 3

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