Voici quelques options de titre, en gardant à l'esprit le format de la question : Simple et direct : * Comment ajuster dynamiquement la largeur du champ de saisie avec JavaScript ? * Création de champs de saisie réactifs : un JavaScrip

Ajuster dynamiquement la largeur du champ de saisie à son entrée

Ajuster dynamiquement la largeur d'un champ de saisie pour qu'il corresponde à la longueur de son contenu peut améliorer l'expérience utilisateur et éviter les mises en page désordonnées. Bien que la définition d'une largeur fixe puisse entraîner un excès d'espace ou une coupure de texte, une approche dynamique garantit un champ de saisie visuellement attrayant et fonctionnel.

Malheureusement, définir une largeur minimale à l'aide de la propriété min-width de CSS ne fonctionne pas pour champs de saisie. Cependant, les navigateurs modernes proposent une unité alternative appelée « ch » (largeur du caractère), qui est indépendante de la police et est égale à la largeur du caractère « 0 » dans n'importe quelle police.

Pour créer une largeur de champ de saisie dynamique, nous pouvons utiliser le code JavaScript suivant :

<code class="js">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}</code>

Ce code lie une fonction de redimensionnement à l'événement d'entrée, qui met à jour la largeur du champ de saisie pour qu'elle soit égale à la longueur de son texte en unités ch. De plus, nous pouvons définir le style du champ de saisie en CSS comme suit :

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

Cela complète la mise en œuvre d'une largeur de champ de saisie réglable dynamiquement qui s'agrandit ou se contracte automatiquement en fonction de son contenu.

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!