Können HTML-Texteingabefelder ohne JavaScript automatisch wachsen?

So lassen Sie HTML-Texteingabefelder beim Tippen automatisch wachsen

Problem:

Benutzer benötigen häufig Texteingabefelder die sich an die Länge des eingegebenen Textes anpassen kann. Während Sie per CSS eine Anfangsgröße festlegen können, wäre es ideal, wenn das Feld automatisch wächst und eine maximale Breite erreicht. Es ist wichtig festzustellen, ob diese Funktion in HTML und CSS, vorzugsweise ohne JavaScript, erreichbar ist.

Lösung:

Überraschenderweise ist es möglich, ein wachsendes Texteingabefeld zu erstellen Verwenden Sie nur CSS und das Attribut contenteditable:

CSS:

<code class="css">span {
    border: solid 1px black;
}

div {
    max-width: 200px;
}</code>

HTML:

<code class="html"><div>
    <span contenteditable="true">sdfsd</span>
</div></code>

Erklärung:

Das Attribut contenteditable ermöglicht es Benutzern, den Text innerhalb des Elements span zu bearbeiten. Die Eigenschaft max-width für das Element div stellt sicher, dass das Feld eine angegebene Breite (in diesem Beispiel 200 Pixel) nicht überschreitet. Während der Benutzer tippt, vergrößert sich das Element span automatisch, um den hinzugefügten Text aufzunehmen, bis zur maximalen Breite.

Hinweis zu Contenteditable:

Denken Sie unbedingt daran, dass Benutzer mit contenteditable HTML-Elemente in das Feld einfügen können. Berücksichtigen Sie dies bei der Entscheidung, ob Sie diesen Ansatz verwenden möchten.

Das obige ist der detaillierte Inhalt vonKönnen HTML-Texteingabefelder ohne JavaScript automatisch wachsen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!