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