Comment créer un champ de saisie de texte HTML extensible dynamiquement à l'aide de CSS ?

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 :

1. CSS : Définir les dimensions et le style du champ de saisie de texte :

<code class="css">span {
    border: solid 1px black;
}
div {
    max-width: 200px; 
}</code>

2. HTML : Créez un élément div avec un span contenteditable à l'intérieur :

<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!