Wie implementiert man eine dynamische Anpassung der Textbereichshöhe ohne Bildlaufleisten?

Textarea Auto Height Revisited

Frage:

Viele Entwickler mussten Anpassungen vornehmen Passt die Höhe eines Textbereichs dynamisch an den darin enthaltenen Inhalt an. Dies verbessert nicht nur das Benutzererlebnis, sondern eliminiert auch unnötige Bildlaufleisten.

Lösung:

Ein Ansatz, dies zu erreichen, ist die Verwendung von reinem JavaScript. Hier ist ein Codeausschnitt, der die Höhe eines Textbereichs effektiv anpasst:

<code class="javascript">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

In diesem Code:

• Element ist der Textbereich, den Sie anpassen möchten.
• Die Anfangshöhe wird auf einen kleinen Wert (5 Pixel) eingestellt, um eine genaue Berechnung zu ermöglichen.
• Die scrollHeight-Eigenschaft gibt die Höhe des Inhalts des Textbereichs zurück, einschließlich verstecktem Überlauf.
• Festlegen der Höhe auf Die Scrollhöhe passt sie dynamisch an den Inhalt an.

So implementieren Sie diese Funktionalität in CSS und HTML:

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

• Größe ändern: keine; verhindert, dass die Größe des Textbereichs vom Benutzer geändert wird.
• Überlauf: versteckt; verbirgt jeglichen überschüssigen Inhalt über die festgelegte Höhe hinaus.
• min-height und max-height definieren die minimalen und maximalen Höhengrenzen.
• Das oninput-Ereignis löst die auto_grow-Funktion aus, wenn sich die Eingabe im Textbereich ändert .

Diese Lösung stellt sicher, dass die Höhe des Textbereichs mit dem darin enthaltenen Inhalt übereinstimmt, und sorgt so für ein verbessertes Benutzererlebnis ohne Bildlaufleisten.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine dynamische Anpassung der Textbereichshöhe ohne Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!