textarea auto height

Diese Frage untersucht, wie die Höhe eines Textbereichs automatisch an die Länge des Inhalts übereinstimmt. Menge an Text, die sie enthalten. Wenn der Text die vordefinierte Höhe überschreitet, wird er unzugänglich und erfordert Scrollen.

Die hier bereitgestellte Lösung verwendet reines JavaScript, um die Höhe eines Textbereichs basierend auf seinem tatsächlichen Inhalt anzupassen. Eine Funktion namens "auto_grow" wird definiert, die die Höhe des Textbereichs zunächst auf "5PX" festlegt. Dies stellt sicher, dass es eine minimale Höhe hat. Anschließend liest es die Eigenschaft "ScrollHeight" des Textbereichs, die die Höhe seines Inhalts darstellt. Die Höhe wird dann so angepasst, dass dieser Wert entspricht und die Höhe des Textbereichs dynamisch macht.

Um diese Funktionalität zu integrieren, wird das folgende CSS empfohlen:

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

Dies fügt das Ereignis "OnInput" an den Textbereich an, der die Funktion "auto_grow" auslöst, wenn der Benutzer in Text eingeht. Infolgedessen passt sich die Höhe des Textbereichs dynamisch an die Länge ihres Inhalts an und liefert eine nahtlose Benutzererfahrung.