Les champs de saisie de texte HTML peuvent-ils s'agrandir automatiquement sans JavaScript ?

Comment faire en sorte que les champs de saisie de texte HTML s'agrandissent automatiquement au fur et à mesure que vous tapez

Problème :

Les utilisateurs ont souvent besoin de champs de saisie de texte qui peut s'adapter à la longueur du texte qu'ils saisissent. Bien que vous puissiez définir une taille CSS initiale, il serait idéal que le champ s'agrandisse automatiquement, jusqu'à une largeur maximale. Déterminer si cette fonctionnalité est réalisable en HTML et CSS, de préférence sans JavaScript, est essentiel.

Solution :

Étonnamment, il est possible de créer un champ de saisie de texte croissant en utilisant uniquement CSS et l'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>

Explication :

L'attribut contenteditable permet aux utilisateurs de modifier le texte dans l'élément span. La propriété max-width sur l'élément div garantit que le champ ne dépasse pas une largeur spécifiée (200 px dans cet exemple). Au fur et à mesure que l'utilisateur tape, l'élément span s'agrandit automatiquement pour s'adapter au texte ajouté, jusqu'à la largeur maximale.

Remarque sur le contenu modifiable :

Il est essentiel de rappeler que l'utilisation de contenteditable permet aux utilisateurs de coller des éléments HTML dans le champ. Tenez-en compte lorsque vous décidez d'utiliser cette approche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!