Wie erstelle ich einen Textbereich mit automatischer Größenanpassung, der beim Löschen von Inhalten kleiner wird?

Erstellen eines Textbereichs mit automatischer Größenänderung, der kleiner wird

Herausforderung: Frühere Versuche, einen Textbereich mit automatischer Größenänderung zu erstellen Durch die Größenänderung konnte der Textbereich nicht entsprechend dem Inhalt verkleinert werden Löschung.

Lösung:

Der bereitgestellte Code aus dem ursprünglichen Thread passt die Höhe des Textbereichs basierend auf seinem Inhalt an. Das Löschen von Inhalten wird jedoch nicht berücksichtigt, was zu einem falschen clientHeight-Wert führt.

Um diese Einschränkung zu überwinden, ist eine umfassendere Lösung erforderlich:

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";
    }
  }
}

Vorteile:

• Verkleinert den Inhalt: Diese Lösung berechnet die neue Höhe korrekt basierend auf Inhaltsänderungen, einschließlich Löschung.
• Zuverlässig in allen Browsern: Unterstützt Firefox, Chrome, IE, Edge, IOS Safari und Android Browser.
• Funktioniert mit vorinstalliertem Text: Handles vorab ausgefüllt Textbereiche.
• Vielseitig: Kann auf alle Textbereiche einer Website angewendet werden.

Verwendung:

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

Zusätzlicher Hinweis:

JavaScript anwenden im strikten Modus hat keinen Einfluss auf die Funktionalität dieser Lösung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Textbereich mit automatischer Größenanpassung, der beim Löschen von Inhalten kleiner wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!