Wie kann Prototype.js die Größe von Textbereichen automatisch ändern?

Automatische Größenanpassung von Textbereichen mit Prototypen

Beim Entwerfen von Benutzeroberflächen ist es häufig erwünscht, dass die Größe von Textbereichen automatisch angepasst wird, um unterschiedliche Textmengen aufzunehmen. Prototype, ein JavaScript-Framework, bietet eine unkomplizierte Lösung, um diesen Effekt zu erzielen.

Vertikale Größenänderung

Die vertikale Größenänderung ist ein praktischer Ansatz, der es ermöglicht, den Textbereich vertikal zu erweitern oder zu verkleinern basierend auf der Anzahl der Textzeilen. Um dies mithilfe von Prototype zu implementieren, kann der folgende Code verwendet werden:

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

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

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

In diesem Code ist die resizeIt-Funktion definiert. Es zählt die Anzahl der Zeilen im Textbereich, indem es den Text an Zeilenumbruchzeichen aufteilt und für jede Zeile eins hinzufügt, wobei ein möglicher Zeilenumbruch berücksichtigt wird. Die Funktion setzt dann das Zeilenattribut des Textbereichs auf die berechnete Zeilenanzahl.

Aktivieren der Funktion

Um das Größenänderungsverhalten zu aktivieren, kann die resizeIt-Funktion angebunden werden ein Ereignis wie „keyup“ oder „keydown“ auf folgende Weise:

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

Beispiel Verwendung

Das folgende Beispiel zeigt, wie die Funktion „Autosize“ für einen Textbereich verwendet wird:

<textarea></textarea>

Dieser Code erstellt einen Textbereich mit einer Zeile und 50 Spalten und passt dessen Größe automatisch an Platzieren Sie den eingegebenen Text.

Das obige ist der detaillierte Inhalt vonWie kann Prototype.js die Größe von Textbereichen automatisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!