Maison > interface Web > js tutoriel > Comment ajuster dynamiquement la largeur d'un champ de saisie de texte en fonction de son contenu ?

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

Mary-Kate Olsen
Libérer: 2024-11-01 11:00:29
original
878 Les gens l'ont consulté

 How to Dynamically Adjust the Width of a Text Input Field Based on Its Content?

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>
Copier après la connexion
<code class="css">input {
  font-size: 1.3em;
  padding: 0.5em;
}</code>
Copier après la connexion
<code class="html"><label>Text
  <input>
</label></code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal