Wie kann ich einen Textbereich mit wirklich automatischer Größenänderung erstellen, der mit dem Inhalt kleiner und größer wird?

Erstellen eines Textbereichs mit automatischer Größenänderung

In einer früheren Diskussion wurde eine Methode zum Erstellen eines Textbereichs mit automatischer Größenänderung vorgestellt. Eine Einschränkung blieb jedoch bestehen: Der Textbereich konnte beim Löschen des Inhalts nicht verkleinert werden. Das entscheidende Problem besteht darin, die richtige Höhe des Inhalts des Textbereichs zu ermitteln.

Vollständige Lösung

Der folgende Code bietet eine umfassende Lösung, die die Einschränkungen behebt, die bei der vorherigen Methode aufgetreten sind:

$("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";
});

Vorteile:

• Funktioniert auf Schlüssel Eingabe
• Unterstützt eingefügten Text (Rechtsklick & Strg-V)
• Verarbeitet ausgeschnittenen Text (Rechtsklick & Strg-X)
• Unterstützt vorinstallierten Text
• Gilt für alle Textbereiche (mehrzeilige Textfelder) auf der gesamten Website
• Kompatibel mit Firefox, Chrome, IE, Edge, iOS Safari und Android-Browser
• Strenge JavaScript-Modus-kompatibel

Implementierung:

1. Enthalten Sie die jQuery-Bibliothek in Ihrer Master-Skriptdatei.
2. Kopieren Sie das JavaScript-Code-Snippet in das Master-Skript Datei.
3. Die selbstanpassenden Textbereiche sind jetzt für die Verwendung auf Ihrer Website verfügbar.

Mit diesem verbesserten Code können Textbereiche jetzt mühelos automatisch in der Größe geändert werden, was eine benutzerfreundliche und benutzerfreundliche Oberfläche bietet Konsistente Erfahrung auf verschiedenen Plattformen und Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Textbereich mit wirklich automatischer Größenänderung erstellen, der mit dem Inhalt kleiner und größer wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!