テキスト入力フィールドを動的に変更します。 これは可能ですか？

チャレンジ：

フォームのコメント（textarea）の入力フィールドを作成して、テキストの数（行）に応じてサイズ（高さ）を変更します。

ユーザーは1行にいくつかの単語を入力するか、Excelから20行の高さのプレートを挿入できます。入力フィールドは自動的に増減します。

行の長さは異なり（形状はゴムで、ブラウザウィンドウのサイズに依存します）、行は\ r \ nで折り返すことができ、幅に収まらない場合もあります。

原則として、textareaのrows属性を変更するには、テキストの行数を計算する式が必要です。



Javascriptは大歓迎です。 html / cssだけで解決できる場合は、さらに良いでしょう。



ソリューション：

IEの場合、 kosiasikが提案する素晴らしいソリューション：

textareaスタイルでは、オーバーフローを書き込みます：可視

drJonnieに提案された普遍的なソリューション：

textareaは高さをピクセル単位で設定し、任意のキー（マウスを含む）を押すとイベントをハングさせます。 このイベントは、毎回scrollHeightとclientHeightを比較します。最初の方が大きい場合、textareaの高さが更新されます。

私はこのソリューションをほとんど実装しました：

 関数adjustHeight（textarea）{
     var dif = textarea.scrollHeight-textarea.clientHeight
     if（dif）{
         if（isNaN（parseInt（textarea.style.height）））{
             textarea.style.height = textarea.scrollHeight + "px"
         } else {
             textarea.style.height = parseInt（textarea.style.height）+ dif + "px"
         }
     }
 } 

選択により、onFocus、onBlur、onKeyPressなどのイベントにハングアップします。

drJonnie はコメントの中で彼の決定を引用しました

lahmatiy は jQuery（ 使用例 ）を使用し てソリューションをもたらしましたが、1つの機能のフレームワーク全体を接続したくありませんでした

議論の参加者全員に感謝します。