純粋な JavaScript でテキストエリアのサイズを自動調整するにはどうすればよいですか?

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

この質問は、テキストエリアのスクロールバーを削除し、テキストエリア内のコンテンツに一致するように高さを調整することを目的としています。純粋な JavaScript コードを使用したソリューションが提供されています。

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

テキストが入力されるとテキストエリアの高さが動的に変更されるようにするため、この関数は oninput イベントによってトリガーされます。さらに、テキストエリアの CSS プロパティを調整して、サイズ変更とオーバーフローを無効にし、必要に応じて最小および最大の高さを設定できます。

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

これらの調整を実装すると、テキストエリアはコンテンツに合わせて高さが自動的に調整されます。スクロールバーの必要性を排除しながら、洗練された応答性の高いユーザー エクスペリエンスを保証します。

以上が純粋な JavaScript でテキストエリアのサイズを自動調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。