Textarea : comportement identique sous IE et Firefox ?

Bonjour,

J'aimerais avoir un affichage et un comportement identique d'un textarea sous IE et sous firefox.

Par exemple: si je met un textarea de 2 colonnes et 5 lignes contenant le texte "123456" :
Sous IE, le "6" sera affiche a la ligne.
Sous firefox, tout est sur une ligne et j'ai une barre de defilement horizontale.

J'ai tout essaye et j'ai l'impression que c'est impossible ?

Visuellement ca pose un probleme sur ma page qui contient plein de textarea de 2 lignes: avec firefox ils ont tous 3 lignes (un espace supplementaire pour la barre de defilement)

white-space:nowrap; ne marche pas ?

Heu... je me trompe, tu voudrais que ça passe à la ligne, c'est ça ?

Bonjour,

Et en travaillant en css avec

width: 50px;

(par exemple) au lieu de row et col dans l'HTML ?
Modifié par g41687 (24 Oct 2008 - 15:54)

Alphonse a écrit :
Heu... je me trompe, tu voudrais que ça passe à la ligne, c'est ça ?

C'est exactement ca.

Le code que j'utilise pour tester est:

<textarea row="2" cols="5" style="">1225465465465456464
45646464654
</textarea>

et ca n'affiche pas du tout la meme chose sous IE et sous firefox
Modifié par sun (27 Oct 2008 - 09:27)

Bon ben je n'ai rien trouve de mieux que de mettre un nombre de lignes differentes suivant le navigateur dans le code php
Ensuite il faut supposer que l'utilisateur ne tapera pas de texte super long (genre une url) qui ferait apparaitre la barre de défilement horizontale.

C'est sûr que si tu utilises un TEXTAREA de taille si réduite, tu prends des risques! Surtout si tu le dimensionnes avec cols et rows (et pas row!), plutôt qu'en CSS.

Il y a une raison pour laquelle tu utilises un textarea de taille si réduite? Si l'utlisateur doit saisir un texte court, pourquoi ne pas avoir utilisé un INPUT de type "text"?

Pour référence:
http://www.w3.org/TR/REC-html40/interact/forms.html#edef-TEXTAREA
http://www.w3.org/TR/REC-html40/interact/forms.html#edef-INPUT
Modifié par Florent V. (27 Oct 2008 - 10:48)

Le texte saisie est potentiellement trop long pour un input.
Le probleme avec les dimensions en css c'est que ca ne permet pas d'avoir un nombre de lignes entier

sun a écrit :
Le texte saisie est potentiellement trop long pour un input.

À ma connaissance, il n'y a pas de limite à la longueur des contenus saisais dans un INPUT de type text si ces données sont soumises en POST. (Bon, il y a peut-être une limite à 4096 ou 65536 octets, il faudrait vérifier.) Donc si le but est de réaliser une zone de saisie de une ligne de haut, et d'une largeur précise, un input de type text sera tout à fait approprié.

Maintenant si tu veux une zone de saisie sur deux lignes, il faudra effectivement passer par un textarea. Avec une hauteur en CSS en EM, et en prévoyant un peu large et testant avec plusieurs navigateurs, tu devrais y arriver. Restera le problème de l'apparition de scrollbars. Tu peux tenter d'utiliser overflow-x: hidden, qui marchera dans Firefox, à priori dans Opera également. Ça devrait marcher dans IE (6 et 7), mais je n'ai jamais testé pour un TEXTAREA, il se peut que ça s'applique mal à cet élément dans IE.

Une page de test à ce sujet:
http://www.brunildo.org/test/Overflowxy2.html

J'ai deja essaye le "hidden".
Si un utilisateur rentre un mot super long (par exemple une url), la fin du texte est cache !
Si je donne la taille en em, ca ne garanti pas que ca va fonctionner avec toutes les police et tous les navigateurs ?

sun a écrit :
J'ai deja essaye le "hidden".
Si un utilisateur rentre un mot super long (par exemple une url), la fin du texte est cache !

Heu... ben oui, c'est le principe du "hidden", ça veut pas dire "affiché" non plus.

En gros tu voudrais que le navigateur coupe les chaines de caractères sans espaces si elles sont trop longues, c'est à dire qu'il réalise une césure automatique?
Ce n'est pas possible. Certains navigateurs le font sur certains caractères (un - ou un / dans une URL, par exemple), mais ça reste relativement limité comme fonctionnalité.

Donc tu auras forcément du texte qui dépasse. Et là les options sont:
- apparition d'une scrollbar (textarea);
- contenu qui dépasse caché (textarea);
- contenu qui dépasse caché mais navigable (input type="text").

sun a écrit :
Si je donne la taille en em, ca ne garanti pas que ca va fonctionner avec toutes les police et tous les navigateurs ?

Le choix des polices ne devrait pas jouer. Les différences d'interprétation / de gestion des boites TEXTAREA par les navigateurs, si, éventuellement (c'est pourquoi je glissais qu'il faudrait tester).

Florent V. a écrit :

En gros tu voudrais que le navigateur coupe les chaines de caractères sans espaces si elles sont trop longues, c'est à dire qu'il réalise une césure automatique?
Ce n'est pas possible. Certains navigateurs le font sur certains caractères (un - ou un / dans une URL, par exemple), mais ça reste relativement limité comme fonctionnalité.

Oui c'est exactement ca mais apparement ce n'est pas possible :s
IE le fait et dans les GUI java, les zones de textes ont aussi ce comportement.
Je vais opter pour une taille en em, merci.