文字の幅に基づいてテキストボックスを拡大する

文字の幅によって文字が追加されるたびに拡大するテキストボックスを作成しようとしています。これが私が試みていることです。それは動作しません。ヒントがあれば、共有してください！文字の幅に基づいてテキストボックスを拡大する

はJavaScript：

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

HTML：

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

2011-11-13 Mike

はsize & lengthの代わりに、あなたのニーズに適したものでなければならない

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

& width

clientWidth試してみてください。

2011-11-13 20:01:33

最初の数文字が途切れるのはなぜですか？ Firefoxで試した。 – Matthew

私は確信していませんが、Chrome 15とOperaでうまく動作します。 Try [monospace]（http://jsfiddle.net/eVd9b/6/）font –

しばらくテストした後、この方法では、 'W'と 'i'の幅がモノスペース以外のフォントで異なることは分かりません。私はそうする解決策を探しています。 – Mike

あなたは、必ずしも各文字の幅を知らないので、少しトリッキーです。あなたが入力した文字で隠しdivを作成し、その幅をつかんで、テキストボックスの幅に追加して、隠れたdivを破棄してみるという方法があります。

2011-11-13 19:56:09 psalvaggio

。またはモノスペースフォントを使用してください。 –

size属性を使用すると便利です。

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

} 
</script>

2011-11-13 20:02:18 kennebec

答えて