placeholder dans formulaire et compatibilité

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par fabrice88, 17 Octobre 2016.

  1. fabrice88
    fabrice88 WRInaute occasionnel
    Inscrit:
    15 Octobre 2007
    Messages:
    316
    J'aime reçus:
    0
    Bonjour,
    dans un formulaire afin de montrera mes internautes la façon remplir je veux mettre un placeholder (avec plusieur ligne de textes) du genre :
    Code:
    placeholder="Comment remplir votre billet :

    Bonjour,
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac faucibus felis. Sed mollis tortor vel felis efficitur bibendum. Aliquam in neque eros. Praesent commodo risus nec consectetur rutrum. 

Etiam faucibus lacus id congue euismod. Proin blandit hendrerit lorem, quis posuere eros semper ut. Maecenas interdum dui augue, in tincidunt ipsum faucibus nec. Etiam egestas id justo a commodo. 
    

        1 maison
        2 chateaux
        3 camion
        
    Par avance merci"
    Sous Chrome j'ai bien les retour à la ligne, sur EDGE et Opera aussi, mais sous Firefox et Safari j'ai pas de retour à la ligne.

    Existe-il un moyen de rendre compatible le placeholder pour tout les navigateurs ? ou un autre moyen tout aussi simple à mettre en place ?
     
    #1 fabrice88, 17 Octobre 2016
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 182
    J'aime reçus:
    351
    #2 spout, 17 Octobre 2016
  3. fabrice88
    fabrice88 WRInaute occasionnel
    Inscrit:
    15 Octobre 2007
    Messages:
    316
    J'aime reçus:
    0
    Marche pas...
    j'ai repris leur exemple mais j'ai tout sur une ligne.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>


<script type="text/javascript" >
 var textAreas = document.getElementsByTagName('textarea'); Array.prototype.forEach.call(textAreas, function(elem) { elem.placeholder = elem.placeholder.replace(/\\n/g, '\n'); }); 
</script>
</head>

<body>

<textarea class="textAreaMultiligne" placeholder="Hello,\nThis is multiligne example\n\nHave Fun" rows="5" cols="35"></textarea> 

</body>
</html>
     
    #3 fabrice88, 17 Octobre 2016
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 182
    J'aime reçus:
    351
    Ah zut en effet, j'ai dû tester le mauvais exemple :D
     
    #4 spout, 17 Octobre 2016
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - placeholder compatibilité Forum Date
Compatibilité Thunderbird 78.8.1 et charset 7 bits. Le café de WebRankInfo 5 Avril 2021
Formulaire html5 : compatibilité navigateurs Développement d'un site Web ou d'une appli mobile 1 Mars 2020
Compatibilité Javascript pour IE. Demandes d'avis et de conseils sur vos sites 21 Avril 2019
Optimisations SEO avant migration et compatibilité mobile ? Débuter en référencement 16 Avril 2018
Compatibilité mobiles - ordis de bureaux Demandes d'avis et de conseils sur vos sites 5 Juillet 2017
Test de compatibilité mobile + PageSpeed [outil officiel Google] Google : l'entreprise, les sites web, les services 6 Juin 2016
Ce site utilise des cookies et compatibilité mobile Demandes d'avis et de conseils sur vos sites 12 Mai 2015
Algorithme de compatibilité mobile Débuter en référencement 27 Avril 2015
Avis sur compatibilite mobile et le référencement Problèmes de référencement spécifiques à vos sites 15 Avril 2015
CSS et compatibilité IE Développement d'un site Web ou d'une appli mobile 10 Avril 2015
Outil de test compatibilité mobile Débuter en référencement 26 Novembre 2014
probleme compatibilite site sur ipad et iphone Développement d'un site Web ou d'une appli mobile 6 Avril 2014
Compatibilité des rich snippets avec la validation W3C Débuter en référencement 25 Avril 2013
Incompatibilité Mail HTML/messageries Développement d'un site Web ou d'une appli mobile 4 Avril 2013
compatibilité entre différents dreamweaver Développement d'un site Web ou d'une appli mobile 27 Octobre 2012
Compatibilité CSS avec IE, FF, Safari, ... Développement d'un site Web ou d'une appli mobile 19 Août 2011
<script> Whois et images/slider incompatibilité? Développement d'un site Web ou d'une appli mobile 19 Juillet 2011
Probleme de compatibilité IE / Firefox Développement d'un site Web ou d'une appli mobile 18 Janvier 2011
Soucis de compatibilité navigateur et résolution d'écran Développement d'un site Web ou d'une appli mobile 17 Décembre 2010
HTML5 & CSS3 readiness / Tableau de compatibilité HTML5 & CSS3 Le café de WebRankInfo 19 Avril 2010