Wie kann ich einen Textbereich mithilfe eines Prototyps automatisch vertikal skalieren?

Autosizing a Textarea with Prototype

Erweitern wir das Konzept der Verbesserung der Benutzererfahrung durch automatische Größenänderung eines Textbereichs basierend auf seinem Inhalt, lassen Sie uns näher darauf eingehen eine detaillierte Lösung mit Prototype.

Vertikale Implementierung Größenänderung

Um unterschiedliche Zeilenlängen zu berücksichtigen, erweist sich die vertikale Größenänderung als praktikable Option. Indem wir die Anzahl der vom Text belegten Zeilen berechnen, können wir die Zeilen des Textbereichs entsprechend anpassen.

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); // Take into account long lines
  })

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

Ereignis-Listener für Tastenanschläge

Um eine rechtzeitige Größenänderung nach jedem Tastendruck sicherzustellen Tastendruck fügen wir einen Ereignis-Listener an den Textbereich an:

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

Horizontal Überlegungen zur Größenänderung

Während die horizontale Größenänderung wünschenswert erscheinen mag, stellt sie aufgrund von Zeilenumbrüchen und langen Zeilen Probleme dar und kann möglicherweise zu Layoutproblemen führen. Daher wird in den meisten Fällen die vertikale Größenänderung bevorzugt.

Integrationsbeispiel

Im bereitgestellten HTML-JavaScript-Beispiel demonstrieren wir die Funktion zur automatischen Größenanpassung in einer praktischen Umgebung, indem wir einen Textbereich aktivieren um die vertikale Größe anzupassen, wenn sich die Texteingabe des Benutzers ändert.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Textbereich mithilfe eines Prototyps automatisch vertikal skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!