Comment ajuster dynamiquement la largeur d'un champ de saisie de texte en fonction de son contenu ?

Ajustement dynamique de la largeur du champ de saisie

Pour obtenir un champ de saisie de texte qui ajuste dynamiquement sa largeur en fonction de son contenu, il existe plusieurs approches pour considérer :

1. Unité CSS ch :

Les navigateurs modernes prennent en charge l'unité CSS ch, qui représente la largeur du caractère zéro dans une police donnée. En définissant la largeur du champ de saisie à l'aide de ch, la largeur s'agrandira automatiquement à mesure que l'entrée grandit.

2. Écouteur d'événement en JavaScript :

À l'aide d'un écouteur d'événement en JavaScript, la valeur de l'entrée peut être surveillée et la largeur peut être ajustée en conséquence. Chaque fois que la valeur change, la fonction resizeInput est appelée, qui définit la largeur sur la longueur de la valeur plus une unité souhaitée (par exemple, "ch").

3. Logique côté serveur PHP :

Si le contenu du champ de saisie est généré dynamiquement côté serveur à l'aide de PHP, la largeur peut être définie à l'aide de l'attribut de style de PHP. Cependant, cette approche nécessite un rechargement de page et n'est pas aussi réactive que les solutions côté client.

Exemple de code :

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

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

<code class="html"><label>Text
  <input>
</label></code>

Par en utilisant l'unité ch, les écouteurs d'événements ou la logique côté serveur, vous pouvez vous assurer que votre champ de saisie ajuste dynamiquement sa largeur pour s'adapter à son contenu, offrant ainsi une expérience plus réactive et conviviale.

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!