Ajuster la taille d’un input

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Suivi de la taille du texte saisi dans un input
Suivi de la taille du texte saisi dans un input

On peut vouloir ajuster la taille d’un input si l’entrée est plus longue que le cadre affiché.

Taper une longue phrase dans l’input suivant :

Cet input a une longueur de 150px. Si l’entrée est plus longue, celui-ci s’allonge. Il s’agit de copier le texte entré dans un <span>, et de donner la longueur du <span> à l’input.

Pour tenir compte de la longueur effective du texte à l’intérieur de l’input, je rajoute 10px pour être sûr que le texte ne déborde pas. De plus, lorsque l’on appuie sur backspace (e.keyCode = 8), on ajoute rien. Il faut également que la taille de police du <span> créé soit la même que celle du texte de l’input.

Et hop, un input texte qui s’allonge avec son contenu.

 

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *