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:
    317
    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 119
    J'aime reçus:
    317
    #2 spout, 17 Octobre 2016
  3. fabrice88
    fabrice88 WRInaute occasionnel
    Inscrit:
    15 Octobre 2007
    Messages:
    317
    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 119
    J'aime reçus:
    317
    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
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
RGPD : compatibilité avec script de conversion GG adwords Droit du web (juridique, fiscalité...) 23 Mai 2018
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