PHPやJavaScriptを使用せずに、テキストエリアをコンテンツに合わせて拡大する方法はありますか？

97

ユーザーが編集できるコンテンツをテキスト領域に入力しています。

（overflow:showdivのように）CSSでコンテンツに合うようにストレッチすることは可能ですか？

html css

— 意義
ソース

1

フレームワークを使わないバグのない答えは誰にもありませんか？:-(

— starbeamrainbowlabs 2016年

css max-width：100％を使用するだけで、自動的にボックスに収まります。それで何か問題はありますか？

— yashas123 2018

これが最新のソリューションです（1行のJSといくつかのCSSウィザードを使用します）：codepen。

— オリバー

42

あんまり。これは通常、javascriptを使用して行われます。

ここでこれを行う方法についての良い議論があります...

プロトタイプを使用したtextareaの自動サイズ設定

— リック・ヘイウッド
ソース

219

1行のみ

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

— マーティンプレストン
ソース

8

どうしてこれは2票しかないのですか。これは信じられないほどのマーティンです。私はこれを解決するために30分を費やしています。すごい仕事。

— フィリップダフニー2018年

31

これは素晴らしい。私は変更することを追加したいthis.scrollHeight + "px"とするとthis.scrollHeight + 3 + "px"、それはスクロールバーを表示しない持っているテキストエリアに大きな十分になります。

— マールテン

問題：ユーザーが下にスクロールするのに十分な量を書き込むと、Enterキーを使用して新しい行を追加するたびにスクロール位置がリセットされます。

— コスタ

5

これは古い質問ですが、編集ページにテキストエリアがあり、ページが読み込まれたときにすでに値があります。コンテンツに合わせて展開するにはどうすればよいですか？

— ArootinAghazaryan19年

1

@ ArootinAghazaryan-すでに解決策を見つけているかもしれませんが、他の人にとっては、HTMLにインライン化する代わりに、サイズ変更コードを使用して関数を作成するだけです。次に、ページの読み込み時に同じ関数を呼び出すことができます。

— マグヌスエリクソン

6

jQueryで機能する関数は次のとおりです（幅ではなく高さのみ）。

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

注： opは、Javascriptを使用しないソリューションを求めましたが、これは、この質問に出くわした多くの人々に役立つはずです。

— クリス・ダトロウ
ソース

5

これは非常に単純な解決策ですが、私にとってはうまくいきます。

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

スニペットを展開

— NicB
ソース

2

ボックスの高さは、新しい行だけでなく、キーストロークごとに増加します。バックスペースと削除でさえ、高さが増加します。修正すると、賛成票が返されます。

— Birrel 2016年

IEのような一部のブラウザは、スクロールの高さを正確に計算しないため、このような問題が発生する可能性があります。さんが同様にChromeで私のために起こっていることを気にしないで...

— KthProg

1

ここでの解決策は、（編集キューがいっぱいになっている）です。

<style>   textarea {     resize: none;     overflow: auto;   } </style>  <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea>  <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){     this.style.height = '1px';     this.style.height = this.scrollHeight + 'px'; } </script>

基本的にはこれにより、最初の1ピクセルまでの高さを設定する必要があります。stackoverflow.com/questions/10722058/...

— KthProg

3

動的テキストエリア制御のもう1つの簡単なソリューション。

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

スニペットを展開

— クルティカ・パテル
ソース