Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-03 18:57:02
original
888 Les gens l'ont consulté

How to Create a Dynamically Expandable HTML Text Input Field Using 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>
Copier après la connexion
  1. 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal