Peut-on avoir un texte de remplacement HTML5 multiligne dans un <textarea> ?

Question

J'ai des textes fantômes dans des champs de texte qui disparaissent lorsque vous vous concentrez dessus en utilisant l'attribut placeholder de HTML5 :

<input type="text" name="email" placeholder="Enter email"/>

Je veux utiliser ce même mécanisme pour avoir un texte de remplacement multiligne dans une zone de texte, peut-être quelque chose comme ceci :

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

Mais ces \n s apparaissent dans le texte et ne provoquent pas de saut de ligne... Existe-t-il un moyen d'avoir un espace réservé multiligne ?

UPDATE : La seule façon dont j'ai réussi à faire fonctionner ce système était d'utiliser la fonction plugin jQuery Watermark qui accepte le HTML dans le texte de remplacement :

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Answer 1

Pour <textarea> s la spécification souligne spécifiquement que les retours de chariot + les sauts de ligne dans l'attribut placeholder DOIVENT être rendus comme des sauts de ligne par le navigateur.

Les agents utilisateurs doivent présenter cette indication à l'utilisateur lorsque la valeur de l'élément est une chaîne vide et que le contrôle n'est pas focalisé (par exemple, en l'affichant à l'intérieur d'un contrôle vide non focalisé). Toutes les paires de caractères U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) dans l'indication, ainsi que tous les autres caractères U+000D CARRIAGE RETURN (CR) et U+000A LINE FEED (LF) dans l'indication, doivent être traités comme des sauts de ligne lors du rendu de l'indication.

Également repris sur MDN : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

Pour information, lorsque j'essaie sur Chrome 63.0.3239.132, cela fonctionne effectivement comme prévu.

Answer 2

Sur le plus (voir détails ci-dessous), l'édition de l'espace réservé en javascript permet un espace réservé multiligne. Comme il a été dit, ce n'est pas conforme à la norme spécification et vous ne devriez pas vous attendre à ce qu'il fonctionne dans le futur (edit : il fonctionne).

Cet exemple remplace tous l'espace réservé de la zone de texte multiligne.

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});

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

_{<a href="https://jsfiddle.net/qfvkLp6m/" rel="nofollow noreferrer">JsFiddle </a>extrait.}

Résultat attendu

---

D'après les commentaires, il semble que certains navigateurs acceptent ce hack et d'autres non.
Voici les résultats des tests que j'ai effectués (avec fureteurs et pile de navigation )

• Chrome : >= 35.0.1916.69
• Firefox : >= 35.0 (les résultats varient selon la plateforme)
• IE : >= 10
• Navigateurs basés sur KHTML : 4.8
• Safari : Non (testé = Safari 8.0.6 Mac OS X 10.8)
• Opera : Non (testé <= 15.0.1147.72)

Fusionné avec des thèses statistiques ce qui signifie qu'il fonctionne sur environ 88.7% d'actuellement (octobre 2015) les navigateurs utilisés.

Mise à jour : Aujourd'hui, il fonctionne sur au moins 94.4% d'actuellement (juillet 2018) les navigateurs utilisés.

Answer 3

Je trouve que si vous utilisez beaucoup d'espaces, le navigateur l'enveloppera correctement. Ne vous souciez pas d'utiliser un nombre exact d'espaces, mettez-en beaucoup, et le navigateur devrait se positionner correctement sur le premier caractère sans espace de la ligne suivante.

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

Answer 4

Il existe actuellement un piratage qui permet d'ajouter des espaces réservés multilignes dans les navigateurs Webkit. Chrome fonctionnait auparavant, mais les versions plus récentes l'ont supprimé :

---

Ajoutez d'abord la première ligne de votre placeholder au html5 comme d'habitude

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

puis ajoutez le reste de la ligne par css :

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

---

Si vous voulez garder vos lignes au même endroit, vous pouvez essayer ce qui suit. L'inconvénient de cette méthode est que les navigateurs autres que chrome, safari, webkit-etc. n'affichent même pas la première ligne :

<textarea id="text2" placeholder="." rows="10"></textarea>

puis ajoutez le reste de la ligne par css :

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

---

Fiddle Demo

Ce serait vraiment génial si s.o. pouvait faire fonctionner une démo similaire sur Firefox.

Answer 5

Le site Spécifications html5 rejette expressément les nouvelles lignes dans le champ du titulaire. Versions de Webkit /volonté/ insère de nouvelles lignes lorsqu'il y a des retours à la ligne dans l'espace réservé, mais ce comportement est incorrect et il ne faut pas s'y fier.

Je suppose que les paragraphes ne sont pas assez brefs pour w3 ;)