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 des caractères), 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 :

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";
}

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 :

input{ font-size:1.3em; padding:.5em; }

Ceci 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.