Champ de saisie de texte HTML extensible dynamiquement à l'aide de CSS
Lors de la création de champs de saisie de texte, vous pouvez spécifier leur taille initiale à l'aide de CSS. Cependant, vous souhaiterez peut-être que le champ s'agrandisse automatiquement au fur et à mesure que vous tapez, jusqu'à une largeur maximale définie.
Atteindre l'extensibilité avec le contenu modifiable
Une approche pour créer un champ extensible Le champ de saisie de texte sans JavaScript se fait en utilisant Content Editable. Cette méthode implique :
<code class="css">span { border: solid 1px black; } div { max-width: 200px; }</code>
<code class="html"><div> <span contenteditable="true">sdfsd</span> </div></code>
Comment ça marche :
Dans cette solution, l'élément span est contenteditable, permettant aux utilisateurs de modifier directement son texte. Au fur et à mesure que vous tapez, la largeur de l'étendue s'étend dans la largeur maximale définie par le div (dans ce cas, 200 px). La bordure de l'étendue indique visuellement la zone de saisie de texte.
Remarque sur le contenu modifiable :
Bien que cette méthode fournisse une solution sans JavaScript, il est important de noter que Les éléments contenteditable peuvent permettre aux utilisateurs de coller des éléments HTML. Tenez-en compte lorsque vous choisissez 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!