Nombreux
sont les sites qui doivent travailler avec des formulaires parfois
de plusieurs "pages" de "hauteur", en donnant
accès à des zones de texte (<textarea>)
suffisamment grandes pour que le visiteur puisse entrer son texte
sans souffrir de claustrophobie.
En effet, pour le créateur de la
page, le choix est limité lorsqu'il s'agit d'implémenter
de longs formulaires. Laisser moins de place aux champs les moins
importants ? Mettre tous les champs à la même taille
mais obliger le visiteur à se servir de l'ascenseur ? Couper
le formulaire en plusieurs page ?
Cette petite astuce, si elle ne résout
pas tous les problèmes, devrait néanmoins aider à
en résorber l'impact sur la mise en page du formulaire :
le champ n'est mis à la taille que quand c'est nécessaire,
c'est à dire quand le visiteur clique dessus. Une fois le
formulaire rempli, le visiteur passe à un autre, et le champ
reprend sa petite taille.
Toute l'astuce
tient dans l'utilisation des évènements onfocus()
et onblur(), qui chargent de modifier
dynamiquement le nombre de lignes et le nombre de caractères
du champ...
Le code
<textarea row="2"
cols="20" onfocus="rows=5,cols=50" onblur="rows=2,cols=20">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam elit
erat, fringilla sed, volutpat non, eleifend nec, odio. Donec sed libero.
Aenean congue purus eget sapien.
</textarea>
|
Discutez en sur 
[