Comment redimensionner dynamiquement les champs de saisie en fonction de la longueur du contenu ?

Ajuster la largeur des champs de saisie à leur saisie

Problème : Modifier la largeur d'un champ de saisie pour se conformer à son contenu en utilisant HTML, JavaScript, PHP ou CSS s'avèrent difficiles. L'attribut min-width est inefficace et les largeurs fixes peuvent entraîner un encombrement visuel.

Solution :

Envisagez d'utiliser l'unité ch de CSS, qui est une mesure indépendante de la police. correspondant à la largeur du caractère zéro. En liant une fonction de redimensionnement à l'événement d'entrée, la largeur du champ de saisie peut être ajustée dynamiquement :

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

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

Pour compléter cela, appliquez les styles CSS suivants :

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

Cela garantit que le champ de saisie adapte sa largeur à la longueur de son contenu tout en conservant le remplissage et la taille de police souhaités.

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!