コンテンツを削除すると縮小する自動サイズ変更 TextArea を作成するにはどうすればよいですか?

縮小する自動サイズ変更機能を使用したテキストエリアの作成

課題: 自動サイズ変更機能を使用してテキストエリアを作成する以前の試みサイズ変更でコンテンツに合わせてテキストエリアを縮小できませんでした

解決策:

元のスレッドから提供されたコードは、コンテンツに基づいてテキストエリアの高さを調整します。ただし、コンテンツの削除は考慮されていないため、clientHeight 値が不正確になります。

この制限を克服するには、より包括的なソリューションが必要です。

function FitToContentWithShrink(id, maxHeight) {
  var text = id && id.style ? id : document.getElementById(id);
  if (!text) return;

  var newHeight = text.scrollHeight;
  var currentHeight = text.clientHeight;

  // Check if the content has changed
  if (newHeight !== currentHeight) {
    if (newHeight > currentHeight) {
      // If the new height is greater than the current height, expand
      text.style.height = newHeight + "px";
    } else if (newHeight < currentHeight) {
      // If the new height is less than the current height, shrink
      text.style.height = newHeight + "px";
    }
  }
}

利点:

• コンテンツを縮小します: この解決策は正しく行われます削除を含むコンテンツの変更に基づいて新しい高さを計算します。
• ブラウザ間で信頼性: Firefox、Chrome、IE、Edge、IOS Safari、Android ブラウザをサポートします。
• 事前に読み込まれたテキストで動作します: 事前に入力されたハンドルtextareas.
• 多用途: Web サイト上のすべての textareas に適用できます。

使用法:

window.onload = function () {
  document.getElementById("ta").onkeyup = function () {
    FitToContentWithShrink(this, 500);
  };
};

追加注:

厳密モードで JavaScript を適用しても、このソリューションの機能には影響しません。

以上がコンテンツを削除すると縮小する自動サイズ変更 TextArea を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。