Comment puis-je redimensionner dynamiquement un champ de saisie pour qu'il corresponde à la longueur de son contenu ?

Redimensionner le champ de saisie pour correspondre à la longueur de saisie

Ajuster la largeur d'un champ de saisie pour qu'il corresponde précisément à sa saisie peut être une tâche délicate. Bien que l'approche traditionnelle consistant à définir une largeur minimale à l'aide de min-width ne donne pas toujours les résultats souhaités, il existe des solutions alternatives pour surmonter ce défi.

Unité CSS : ch

Les navigateurs modernes prennent en charge l'unité CSS « ​​ch », qui représente la largeur du caractère « 0 » (zéro) dans la police actuelle. Cette unité est indépendante de la police, offrant un moyen fiable de définir la largeur minimale du champ de saisie.

Fonction de redimensionnement JavaScript

Pour ajuster dynamiquement la largeur en fonction de la saisie longueur, vous pouvez utiliser la fonction JavaScript suivante :

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

Cette fonction récupère la valeur de l'entrée et définit la largeur à l'aide de l'unité "ch", garantissant ainsi la le champ s'agrandit ou se rétrécit pour s'adapter à l'entrée.

Liaison à l'événement d'entrée

Pour déclencher la fonction de redimensionnement, liez-la à l'événement « entrée » :

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

En appliquant ces techniques, vous pouvez créer des champs de saisie qui ajustent de manière fluide leur largeur en fonction de la saisie, offrant ainsi une interface plus conviviale et dynamique. expérience.

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!