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

Ajuster la largeur du champ de saisie à son contenu

Lorsque vous essayez de définir la largeur minimale d'un champ de saisie à l'aide de "min-width", cela ne fonctionne pas Pour que cela ne fonctionne pas comme prévu, des solutions alternatives sont nécessaires. Une de ces solutions consiste à utiliser l'unité CSS « ​​ch », qui représente la largeur du caractère « 0 » dans une police spécifique.

Dans les navigateurs modernes, le CSS suivant peut être utilisé :

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

Pour ajuster la largeur du champ de saisie en fonction de son contenu, une fonction JavaScript peut être liée à l'événement "input" :

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

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

Cette fonction JavaScript modifie la largeur du champ de saisie pour qu'elle corresponde la longueur de sa valeur plus 1 'ch' pour tenir compte du rembourrage. L'écouteur d'événements garantit que la largeur est mise à jour chaque fois que la valeur d'entrée change.

Remarque : cette approche peut ne pas convenir à tous les scénarios en raison de problèmes de compatibilité du navigateur avec l'unité « ch ». Testez toujours votre code sur différents navigateurs et systèmes d'exploitation pour garantir la fonctionnalité souhaitée.

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!