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

Textarea 自動高さ

Textarea 要素に関しては、その高さを管理することが、ユーザー エクスペリエンスを向上させ、デザインの美しさを維持するために重要です。ウェブアプリケーション。場合によっては、テキストエリアに含まれるテキストの量に基づいてテキストエリアの高さを自動的に調整したい場合があります。

これを実現する効果的な解決策の 1 つは、JavaScript と CSS を使用することです。これを実装するためのステップバイステップのガイドは次のとおりです。

JavaScript:

1. テキストエリアの値を計算して更新する JavaScript 関数を作成します。 height:

function auto_grow(element) {
  // Set the initial height to a small value (e.g., 5px)
  element.style.height = "5px";

  // Calculate the new height based on the scrollHeight property
  element.style.height = (element.scrollHeight) + "px";
}

CSS:

2. テキストエリアのスタイルを設定して垂直スクロールを防止し、最小限に設定しますディメンション:

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

HTML:

3. テキストエリアのコンテンツが変更されたときに auto_grow 関数を呼び出すイベント リスナーを追加します:

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

このソリューションを実装すると、テキストエリアの高さがテキストに合わせて自動的に調整されます。入力または削除され、動的で便利なユーザー エクスペリエンスを提供します。

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