スクロールバーを使用せずに動的なテキストエリアの高さ調整を実装するにはどうすればよいですか?

テキストエリアの自動高さの再検討

質問:

多くの開発者は調整の必要性に遭遇しています。テキストエリア内のコンテンツに合わせてテキストエリアの高さを動的に調整します。これにより、ユーザー エクスペリエンスが向上するだけでなく、不要なスクロールバーも排除されます。

解決策:

これを実現する 1 つのアプローチは、Pure JavaScript を使用することです。以下は、テキストエリアの高さを効果的に調整するコード スニペットです:

<code class="javascript">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

このコード内:

• 要素は、調整するテキストエリアです。
• 正確な計算を可能にするために、初期の高さは小さい値 (5px) に設定されています。
• scrollHeight プロパティは、非表示のオーバーフローを含むテキストエリアのコンテンツの高さを返します。
• 高さをスクロールの高さはコンテンツに合わせて動的に調整されます。

CSS と HTML でこの機能を実装するには:

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

• resize: none;ユーザーがテキストエリアのサイズを変更できないようにします。
• overflow: hidden;設定された高さを超える余分なコンテンツを非表示にします。
• min-height と max-height は、高さの最小値と最大値の制限を定義します。
• oninput イベントは、テキストエリアの入力が変更されるたびに auto_grow 関数をトリガーします。 .

このソリューションにより、テキストエリアの高さがそこに含まれるコンテンツと確実に一致し、スクロールバーのないユーザー エクスペリエンスが向上します。

以上がスクロールバーを使用せずに動的なテキストエリアの高さ調整を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。