CSSだけでテキストエリアの高さを動的に調整できますか?

CSS による動的テキストエリアの高さ

ユーザー入力用のテキストエリアを作成する場合、多くの場合、その量に合わせてテキストエリアを拡大または縮小することが望ましいです。内容の。 JavaScript または PHP を含むソリューションは存在しますが、純粋に CSS ベースの方法はありますか?

解決策:

はい、CSS を使用して動的なテキストエリアを実現することができます。身長。方法は次のとおりです:

1. 初期の高さを自動に設定します: 必要に応じてテキストエリアを拡大または縮小できるようにするには、初期の高さを「自動」に設定します:

textarea {
  height: auto;
}

2. 'oninput' イベントを使用します: テキストエリアの高さを動的に調整するには、'oninput' イベント ハンドラーをそれにアタッチします:

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

3. 最初に高さをリセット: コンテンツに基づいて高さを設定する前に、まず空の文字列にリセットします。これにより、テキストエリアが拡大だけでなく縮小できるようになります。
4. 実際の高さを計算する: スクロールされたコンテンツに基づいてテキストエリアの実際の高さを決定し、それをピクセルとして「高さ」プロパティに追加します。 .

これらの手順を実装すると、JavaScript や PHP に頼ることなく、コンテンツに合わせて高さを自動的に調整するテキストエリアを作成できます。

以上がCSSだけでテキストエリアの高さを動的に調整できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。