Maison >interface Web >tutoriel CSS >Comment puis-je ajuster automatiquement la largeur d'une saisie de texte en fonction de sa valeur ?

Comment puis-je ajuster automatiquement la largeur d'une saisie de texte en fonction de sa valeur ?

DDD
DDDoriginal
2024-12-31 13:38:17409parcourir

How Can I Automatically Adjust the Width of a Text Input Based on its Value?

Détermination de la largeur d'entrée[type=text] en fonction de la longueur de la valeur

Question :

La largeur d'un l'élément soit-il automatiquement ajusté pour correspondre à la longueur de sa valeur ?

Réponse :

Oui, il existe deux méthodes pour y parvenir :

Méthode 1 : Définition de l'attribut de taille

Le code JavaScript suivant définit l'attribut de taille de éléments à la longueur de leurs valeurs :

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

Méthode 2 : Utilisation de la mesure de texte CSS

Pour un ajustement plus précis, vous pouvez utiliser une technique CSS pour calculer la largeur en pixels du texte de l'entrée. Voir cette réponse connexe pour plus de détails : [input[type=text] avec une largeur dimensionnée ?](https://stackoverflow.com/a/4926882/1363694)

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!

Déclaration:
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