コンテンツに合わせて縮小したり拡大したりする、本当に自動でサイズ変更されるテキストエリアを作成するにはどうすればよいですか?

自動サイズ変更を使用したテキストエリアの作成

前の説明では、自動サイズ変更テキストエリアを作成する方法を紹介しました。ただし、コンテンツの削除時にテキストエリアを縮小できないという制限が残りました。重要な問題は、テキストエリアのコンテンツの正しい高さを取得することにあります。

完全な解決策

次のコードは、前の方法で発生した制限に対処する包括的な解決策を提供します。

$("textarea").each(function () {
  this.style.height = this.scrollHeight + "px";
  this.style.overflowY = "hidden";
}).on("input", function () {
  this.style.height = "auto";
  this.style.height = this.scrollHeight + "px";
});

利点:

• キーで動作しますinput
• 貼り付けられたテキストをサポートします (右クリック & Ctrl V)
• 切り取られたテキストを処理します (右クリック & Ctrl X)
• 事前にロードされたテキストに対応します
• サイト全体のすべてのテキストエリア (複数行のテキストボックス) に適用されます
• 互換性ありFirefox、Chrome、IE、Edge、iOS Safari、Android ブラウザー
• 厳密な JavaScript モード準拠

実装:

1. マスタースクリプトにjQueryライブラリを含めますファイル。
2. JavaScript コード スニペットをマスター スクリプト ファイルにコピーします。
3. 自動調整テキストエリアが Web サイトで使用できるようになりました。

これにより、強化されたコードにより、テキストエリアは簡単に自動サイズ変更できるようになり、さまざまなプラットフォームやブラウザーにわたってユーザーフレンドリーで一貫したエクスペリエンスを提供できるようになりました。

以上がコンテンツに合わせて縮小したり拡大したりする、本当に自動でサイズ変更されるテキストエリアを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。