CSS と JavaScript を使用してテキストエリアの高さを自動調整する方法を教えてください。

テキストエリアの自動高さ: 総合ガイド

テキストエリアを操作する場合、多くの場合、テキスト コンテンツに基づいて高さを自動的に調整することが望ましいです。過剰なスクロールや空きスペースを削除します。 CSS と JavaScript の両方を使用してこの効果を実現する詳細なソリューションを次に示します。

CSS スタイル:

textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 15px 15px 30px;
  max-width: 100%;
}

この CSS は、テキストエリアのサイズ変更が不可能であることを保証し、テキストエリアを非表示にします。オーバーフローし、適切な行の高さとパディングを設定します。

JavaScriptロジック:

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

この JavaScript 関数は、コンテンツに基づいてテキストエリアの高さを動的に調整するために使用されます。初期の高さを 5 ピクセルに設定し、テキスト コンテンツの実際の高さを表すscrollHeight プロパティにサイズ変更します。

HTML 統合:

<textarea oninput="auto_grow(this)"></textarea>

oninput イベント リスナーを textarea にアタッチします。これにより、ユーザーが入力するたびに auto_grow() 関数がトリガーされます。 text.

実装:

CSS スタイル、JavaScript 関数、HTML 統合を組み合わせて、入力時に高さを自動的に調整するテキストエリアを作成し、より多くのユーザーに提供します。 - フレンドリーで見た目にも美しい体験。

以上がCSS と JavaScript を使用してテキストエリアの高さを自動調整する方法を教えてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。