入力されたテキストに応じてテキストフィールドの幅を広げる方法は？

Question

ユーザが何らかのテキストを入力した場合、自動的に入力テキストフィールドの幅を広げたいと考えています。しかし、それを行う方法。助けてください.Jqueryまたはjavascriptを使用することができます。

ありがとうございました。

Answer 1

これを試してみてください：

<script> 
function adjustWidth(obj) { 

    obj.style.width = (obj.value.length) * 7.3 + "px"; 
} 
</script> 
<input type="text" onkeypress="adjustWidth(this)"> 

しかしこれは、テキストのサイズに依存し、フォントなど

Answer 2

あなたは文字の幅として正確に増加することはできません

DEMO

<input style="width:100px" onkeyup="var len = this.value.length; 
if (len>10) { 
    this.style.width=(parseInt(this.style.width)+10)+'px'; 
}" /> 

Answer 3

幅のような何かを意味互いに異なります。

しかし、あなたは、私はすべての文字のフィールドサイズは10pxの増加する必要があると仮定しています見ることができるように、まだ、あなたはこの

$("input:text").keyup(function() { 
    $(this).css('width', $(this).val().length*10); 
}); 

Demo ような何かを行うことができます。これは、すべての文字に適合する正しい比率を割り当てるのは非常に難しいです。

Answer 4

実は、あなたは正確にそれを行うことができます。これは、テキストボックスと同じフォントでオフスクリーンの絶対配置されたdivを開き、キーアップ上のテキストボックスのテキストを入力することによって行います。そのdivの幅（テキストに適合する）をとり、テキストボックスをその幅に設定します。

divを非表示（左：-9999px）、非表示（表示：なし）にする必要があること、または幅を計算するためにブラウザがテキストをレンダリングする必要があることに注意してください。また、divのテキストをテキストボックスの内容と末尾のスペースに設定すると、表示されるキーと更新される幅の間の遅れを考慮して、テキストボックスが常に1文字より大きくなるようになります。

休憩の後、私はJames PadolseyのJQuery Autoresizeスクリプトの修正版を投稿します。このスクリプトはテキスト領域で動作し、最初に幅をある最大サイズに変更し、次にテキストが折り返すと高さを変更します。それは正確にあなたが探しているものではありませんが、それは助けるかもしれません。