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

チャレンジ:
フォームのコメント(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つの機能のフレームワーク全体を接続したくありませんでした
議論の参加者全員に感謝します。


Source: https://habr.com/ru/post/J21905/


All Articles