Können Sie die Textbereichshöhe nur mit CSS dynamisch anpassen?

Dynamische Textbereichshöhe mit CSS

Beim Erstellen eines Textbereichs für Benutzereingaben ist es oft wünschenswert, ihn zu vergrößern oder zu verkleinern, um ihn an die Größe anzupassen des Inhalts. Es gibt zwar Lösungen mit JavaScript oder PHP, aber gibt es eine rein CSS-basierte Methode?

Die Lösung:

Ja, es ist möglich, CSS zu verwenden, um dynamische Textbereiche zu erreichen Höhe. So geht's:

1. Setzen Sie die Anfangshöhe auf „Auto“: Damit der Textbereich je nach Bedarf vergrößert oder verkleinert werden kann, setzen Sie seine Anfangshöhe auf „Auto“:

textarea {
  height: auto;
}

2. Verwenden Sie das „oninput“-Ereignis: Um die Höhe des Textbereichs dynamisch anzupassen, hängen Sie einen „oninput“-Ereignishandler daran an:

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

3. Höhe zuerst zurücksetzen: Bevor Sie die Höhe basierend auf dem Inhalt festlegen, setzen Sie sie zunächst auf eine leere Zeichenfolge zurück. Dadurch wird sichergestellt, dass der Textbereich sowohl verkleinert als auch vergrößert werden kann.
4. Berechnen Sie die wahre Höhe: Bestimmen Sie die wahre Höhe des Textbereichs anhand seines gescrollten Inhalts und fügen Sie ihn als Pixel zur Eigenschaft „Height“ hinzu .

Durch die Implementierung dieser Schritte können Sie einen Textbereich erstellen, dessen Höhe automatisch an den Inhalt angepasst wird, ohne auf JavaScript oder PHP zurückgreifen zu müssen.

Das obige ist der detaillierte Inhalt vonKönnen Sie die Textbereichshöhe nur mit CSS dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!