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

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 :

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

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

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

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!