Comment puis-je adapter automatiquement la largeur d'un champ de saisie pour qu'elle corresponde à son contenu en JavaScript et jQuery ?

Mise à l'échelle automatique de la largeur d'un champ de saisie pour correspondre à la valeur d'entrée

Dans le domaine du développement Web, il est souvent souhaitable d'ajuster dynamiquement la largeur d'un champ de saisie pour correspondre à la longueur de son contenu. Cela garantit que le champ occupe uniquement l'espace nécessaire sur l'écran. Voici comment y parvenir en utilisant JavaScript et jQuery :

Solution :

1. Définissez la largeur initiale sur Auto :

Tout d'abord, spécifiez la propriété width du champ de saisie sur auto. Cela permet au domaine de s'étendre naturellement en fonction de son contenu.

input {
  display: block;
  margin: 20px;
  width: auto;
}

2. Mettre à jour la largeur lors de la frappe :

Ensuite, utilisez jQuery pour mettre à jour l'attribut de taille du champ de saisie à chaque fois qu'une touche est enfoncée. Cet attribut détermine le nombre de caractères que le champ peut contenir. En le définissant sur la longueur du contenu, le champ s'adaptera automatiquement à la largeur appropriée.

$('input[type="text"]').keyup(function() {
  $(this).attr('size', $(this).val().length);
});

3. Redimensionner au chargement de la page :

Après avoir configuré le gestionnaire d'événements, déclenchez manuellement le comportement de redimensionnement une fois la page chargée. Cela garantit que les champs sont correctement dimensionnés lors de l'affichage initial.

$('input[type="text"]').each(function() {
  $(this).attr('size', $(this).val().length);
});

Exemple :

Considérez le HTML suivant :

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />

Quand la page se charge, les deux champs de saisie verront leur largeur ajustée pour s'adapter à leur texte contenu.

Remarque :

Bien que cette approche redimensionne efficacement la largeur du champ de saisie, elle peut entraîner l'ajout d'un certain remplissage sur le côté droit. Pour obtenir un ajustement plus serré, vous pouvez envisager d'utiliser une technique telle que mesurer la taille en pixels du texte et ajuster la propriété de largeur en conséquence.

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!