Wie kann ich die Größe eines Textbereichs mit reinem JavaScript automatisch anpassen?

Automatische Höhe des Textbereichs

Diese Frage zielt darauf ab, die Bildlaufleiste eines Textbereichs zu entfernen und seine Höhe an den darin enthaltenen Inhalt anzupassen. Es wird eine Lösung mit reinem JavaScript-Code bereitgestellt:

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

Um sicherzustellen, dass sich die Höhe des Textbereichs dynamisch ändert, wenn Text eingegeben wird, wird diese Funktion durch das oninput-Ereignis ausgelöst. Darüber hinaus können die CSS-Eigenschaften des Textbereichs angepasst werden, um Größenänderung und Überlauf zu deaktivieren und bei Bedarf minimale und maximale Höhen festzulegen:

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

Durch die Implementierung dieser Anpassungen passt der Textbereich seine Höhe automatisch an den Inhalt an. Dadurch entfällt die Notwendigkeit einer Bildlaufleiste und gleichzeitig wird ein elegantes und reaktionsschnelles Benutzererlebnis gewährleistet.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Textbereichs mit reinem JavaScript automatisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!