Taille du input dynamique ?

Bonjour à tous,

Je voudrais savoir s'il était possible d'avoir des champs de textes qui soient "extensibles"...
C'est-à-dire que si je met "txt" dedans, il fasse juste la taille qu'il faut pour que l'on voit juste "txt" et pas plus.
Si je met "un longue phrase dedans", ça fasse la taille pour qu'on puisse tout voir, pas moins, pas plus...

Avez-vous des idées ?

Merci à vous
Cordialement,

Tu veux, si j'ai bien compris, que lorsque l'on tape du texte dans le champs celui-ci s'agrandisse ? Mais comment on fait quand il y a zéro caractères ? On n'affiche pas le champs ?

Sinon ça doit pouvoir être fait en javascrip :
- calculer la taille du texte dans le champs
- modifier la taille du champs

Mais d'un point de vue ergonomique, accessible et utilisable, je pense qu'on se rapproche du zéro absolu.

En fait, l'input est du "readonly" donc l'utilisateur ne peut pas changer le texte
Et il y aura toujours quelque chose dedans... Le contenu est changé par un calendrier dynamique.

Comment puis-je "calculer la taille du texte dans le champs" ?

Merci

Bonjour,

Il existe un plugin Auto Growing Textareas pour JQuery. Voir le démo avec un textarea.

À toi de voir si cela s'adapte bien à ton contexte.
Modifié par Tony Monast (30 Dec 2008 - 16:26)

Bonjour,

a écrit :
En fait, l'input est du "readonly" donc l'utilisateur ne peut pas changer le texte
Et il y aura toujours quelque chose dedans... Le contenu est changé par un calendrier dynamique.

Mouais... je ne vois pas pourquoi ça imposerait de restreindre la largeur du champ de formulaire à celle du texte. Sauf si c'est une question de design, mais dans ce cas:
- sans JavaScript, utiliser un INPUT normal, avec une largeur fixe;
- via JavaScript, cacher l'INPUT (pas en display: none de préférence) et utiliser un élément de texte simple (par exemple un SPAN) et un INPUT caché;

a écrit :
Comment puis-je "calculer la taille du texte dans le champs" ?

C'est impossible. Même si tu connais le nombre de caractères, tu ne sais pas quelle taille ils occupent, et tu ne peux pas maitriser cette taille de manière réellement fiable (comme pour tout autre texte d'un site web).

Tony Monast a écrit :
Il existe un plugin Auto Growing Textareas pour JQuery.

Qui a de sérieuses limites:
- si la bonne fonte n'est pas utilisée, la hauteur du TEXTAREA n'est plus correcte;
- si la taille du texte est modifiée, la hauteur du TEXTAREA n'est plus correcte.

Florent V. a écrit :

Qui a de sérieuses limites:
- si la bonne fonte n'est pas utilisée, la hauteur du TEXTAREA n'est plus correcte;

Pourrais-tu donner plus de détails là-dessus? Comment arriver à reproduire ce problème?

Florent V. a écrit :

- si la taille du texte est modifiée, la hauteur du TEXTAREA n'est plus correcte.

Du moins, dans Firefox 2, lorsque je modifie la taille du texte, la hauteur du textarea reste correcte. Je n'ai pas beaucoup de navigateurs sous la main aujourd'hui, y'en-a-t-il un en particulier où ce problème survient?

Edit : Dans Firefox 2, j'arrive seulement à reproduire ce problème lorsque je réduis la taille du texte. Par contre, dès que je modifie son contenu à nouveau, le textarea reprend les bonnes dimensions.
Modifié par Tony Monast (30 Dec 2008 - 16:41)

Alors je corrige, les limites sont beaucoup moins sérieuses et le script mieux conçu que je ne le pensais.

- Le problème avec le changement de fonte ne se produit que si on change la fonte dynamiquement (via Firebug ou du JS par exemple), ce qui est tout de même rare.
- Celui avec la taille du texte se produit au redimensionnement, mais à priori pas au chargement de la page.
- Dans tous les cas si on saisit un retour à la ligne dans le textarea, sa hauteur est réévaluée.

Autant pour moi.
Modifié par Florent V. (30 Dec 2008 - 18:10)