Implementierung der automatischen Größenänderung von TextArea mit Prototype

Um das Benutzererlebnis in Ihrer internen Vertriebsanwendung zu verbessern, sollten Sie erwägen, der Funktion zur automatischen Größenänderung hinzuzufügen Textbereich, der für die Lieferadresse verwendet wird. Hier ist eine detaillierte Anleitung, wie Sie dies erreichen:

Das Ziel besteht darin, einen Textbereich zu erstellen, der seine Höhe dynamisch an die Texteingabe anpasst und so eine optimale Raumnutzung und Lesbarkeit gewährleistet. Dazu nutzen wir Prototype, ein JavaScript-Framework.

Fügen Sie zunächst den erforderlichen JavaScript-Code zu Ihrer Seite hinzu:

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount  = 1   Math.floor(l.length / cols); // Consider long lines
  })

  $('iso_address').rows = linecount;
};

Dieser Code berechnet die Anzahl der Textzeilen im Textbereich basierend auf der Zeichenanzahl, der Spaltenbreite und den Zeilenumbrüchen. Der resultierende Wert wird der Eigenschaft „rows“ des Textbereichs zugewiesen, wodurch dessen Größe effektiv geändert wird.

Um die automatische Größenänderung zu aktivieren, hängen Sie die resizeIt-Funktion an ein entsprechendes Ereignis an. Beispielsweise könnten Sie „keyup“ verwenden, um Texteingabeänderungen zu erfassen:

Event.observe('iso_address', 'keyup', resizeIt);

Wenn der Textbereich zum ersten Mal geladen wird, rufen Sie die resizeIt-Funktion auf So initialisieren Sie die Höhe:

resizeIt();

Mit dieser Implementierung passt der Textbereich seine Höhe automatisch an den Benutzer an Typen, optimiert den vertikalen Platz des Formulars und stellt sicher, dass die Adressinformationen lesbar dargestellt werden.