Textarea フィールドに自動高さ調整を実装するにはどうすればよいですか?

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

この質問では、コンテンツの長さに合わせてテキストエリアの高さを自動的に調整し、効果的にテキストエリアの高さを調整する方法を検討します。垂直スクロールバーが必要です。

この問題は、デフォルトでは、テキストエリアに含まれるテキストの量に関係なく、テキストエリアの高さが固定されているという事実から発生します。テキストが事前定義された高さを超えると、アクセスできなくなり、スクロールが必要になります。

ここで提供されるソリューションでは、純粋な JavaScript を使用して、実際のコンテンツに基づいてテキストエリアの高さを調整します。 「auto_grow」という関数が定義されており、テキストエリアの高さを最初に「5px」に設定します。これにより、最小の高さが保証されます。続いて、テキストエリアのコンテンツの高さを表す「scrollHeight」プロパティを読み取ります。次に、この値に一致するように高さが調整され、テキストエリアの高さが効果的に動的になります。

この機能を統合するには、次の CSS が推奨されます。

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

この CSS は、組み込みのハンドルのサイズを変更し、表示されるオーバーフローを防ぎ、最小および最大の高さ制限を設定します。

最後に、自動サイズ変更を利用するために、次の HTML が使用されます。

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

これにより、「oninput」が追加されます。 " イベントを textarea に送信し、ユーザーがテキストを入力するたびに "auto_grow" 関数をトリガーします。その結果、テキストエリアの高さがコンテンツの長さに合わせて動的に調整され、シームレスなユーザー エクスペリエンスが提供されます。

以上がTextarea フィールドに自動高さ調整を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。