Maison > interface Web > js tutoriel > Comment ajuster dynamiquement la largeur du champ de saisie en fonction du contenu ?

Comment ajuster dynamiquement la largeur du champ de saisie en fonction du contenu ?

Linda Hamilton
Libérer: 2024-10-27 13:52:02
original
895 Les gens l'ont consulté

How to Dynamically Adjust Input Field Width Based on Content?

Ajustement dynamique de la largeur du champ de saisie à son contenu

Alors que le code CSS fourni style="min-width:1px;" peut ne pas fonctionner efficacement pour les champs de saisie, il existe une solution alternative qui ajuste dynamiquement la largeur du champ de saisie en fonction de son contenu. Cette approche implique l'utilisation de l'unité CSS « ​​ch » (caractère), qui représente la largeur du caractère « 0 » (zéro) dans la police choisie.

Pour mettre en œuvre cette solution, JavaScript peut être utilisé pour gérer le Événement 'input', qui se déclenche chaque fois que l'utilisateur tape dans le champ de saisie. Au sein de ce gestionnaire d'événements, les actions suivantes peuvent être effectuées :

1

2

3

4

5

6

7

<code class="javascript">var input = document.querySelector('input'); // get the input element

input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event

resizeInput.call(input); // immediately call the function

 

function resizeInput() {

  this.style.width = this.value.length + "ch";

}</code>

Copier après la connexion

De plus, pour affiner l'apparence du champ de saisie, CSS peut être appliqué comme suit :

1

<code class="css">input{ font-size:1.3em; padding:.5em; }</code>

Copier après la connexion

Ensemble, ces modifications permettront au champ de saisie d'ajuster de manière fluide sa largeur pour s'adapter à son contenu tout en conservant la lisibilité. L'unité « ch » garantit que la largeur est proportionnelle aux caractères saisis, ce qui donne un champ de saisie dynamique.

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