Comment étendre le champ de saisie de texte HTML lors d'une frappe sans JavaScript ?

Agrandissement du champ de saisie de texte HTML lors d'une frappe au clavier sans JavaScript

Agrandir la taille d'un champ de saisie de texte à mesure que l'utilisateur tape est une exigence courante pour formulaires de saisie de texte. Bien que les solutions JavaScript ou jQuery soient souvent utilisées, des techniques CSS et HTML pures peuvent réaliser cette fonctionnalité.

Une approche consiste à utiliser l'attribut contenteditable sur un élément span, permettant à l'utilisateur de modifier directement le contenu. Cet attribut permet à l'élément d'être traité comme une zone de texte modifiable. En définissant la propriété max-width de l'élément div contenant, vous pouvez spécifier la largeur maximale que le champ de saisie peut atteindre lors de l'expansion.

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>

En implémentant cette technique, vous pouvez créer des champs de saisie de texte qui se développent automatiquement à mesure que l'utilisateur saisit plus de texte, jusqu'à la largeur maximale spécifiée, sans avoir besoin de JavaScript. ou jQuery.

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!