2010-12-28 29 views
3

テキストエリアの幅を100%に設定しましたが、今では1行にいくつの文字が収まるかを知る必要があります。テキストエリアの高さを自動サイズ設定する方法は?

私は、テキストエリアを自動的に拡大/縮小するためのjavascript関数を作成しようとしています。私はjqueryを使うのをやめようとしています。

私の論理はcount += rows.length、その後、rowscount += rows[i].length/textarea.colsを反復処理し、最終的にtextarea.rows = countrows = textarea.value.split('\n')にあります。唯一の問題は、textarea.colsが小さすぎるためcountが大きすぎるということです。

+3

これは難しい問題です。ほとんどのフォントでは、各文字の幅が異なるため、固定数の文字を予測することは不可能です。これを行うには、宅配便のようなモノスペースのフォントを使用する必要があります –

+0

JavaScriptを使用する理由CSSを使用できますか? #textareaId {width:100%; } – brildum

+0

@Pekka - いつもあなたの答えを読んで楽しんでいる/コメント – ifaour

答えて

2

この関数は、要素の高さ(あなたの場合はtextarea)をブラウザのデフォルトの高さに設定します。スクロールバーが表示されると、実際に必要な高さに切り替わります。

function autoHeight(element){ 
    element.style.height='auto'; 
    element.style.height=element.scrollHeight+'px'; 
} 

ブラウザのデフォルトの高さが気に入らない場合は、それを他のデフォルト値に変更することができます。

+0

+1見つけた。私が変更する唯一のことは、 'text.ayle = 0;'を使って 'textarea'の高さをできるだけ小さくすることです。それ以外の場合は、使用しているブラウザの場合は少なくとも2行です。 – Grzegorz

+0

ありがとうございます。関数に 'minHeight'パラメータを追加することもできます。たとえば、keyupイベントでこれを使用すると、高さが0になるとちらつきが発生する可能性があります。 – DanMan

関連する問題