Pouvez-vous avoir du texte d'espace réservé HTML5 multiligne dans une <textarea>?

J'ai du texte fantôme dans les champs de texte qui disparaissent lorsque vous vous concentrez sur eux à l'aide de l'attribut d'espace réservé de HTML5:

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

Je veux utiliser le même mécanisme pour avoir un texte d'espace réservé 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 ceux \n-ci apparaissent dans le texte et ne provoquent pas de sauts de ligne ... Existe-t-il un moyen d'avoir un espace réservé multiligne?

MISE À JOUR : La seule façon dont je l'ai fait fonctionner était d'utiliser le plugin jQuery Watermark , qui accepte le HTML dans le texte de l'espace réservé:

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

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

Les agents utilisateurs doivent présenter cet indice à l'utilisateur lorsque la valeur de l'élément est la chaîne vide et que le contrôle n'est pas focalisé (par exemple en l'affichant dans 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ées comme sauts de ligne lors du rendu de l'indice.

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

FWIW, quand j'essaye sur Chrome 63.0.3239.132, cela fonctionne en effet comme il se doit.

Sur la plupart des navigateurs (voir les détails ci-dessous), la modification de l'espace réservé en javascript autorise l'espace réservé multiligne. Comme il a été dit, il n'est pas conforme à la spécification et vous ne devriez pas vous attendre à ce que cela fonctionne à l'avenir (modifier: cela fonctionne).

Cet exemple remplace tous les espaces réservés 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>

_{Extrait JsFiddle .}

Sur la base des commentaires, il semble que certains navigateurs acceptent ce hack et d'autres non.
Voici les résultats des tests que j'ai exécutés (avec des instantanés et des navigateurs )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35,0 (les résultats varient selon la plate-forme)
• 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 ces statistiques , cela signifie qu'il fonctionne sur environ 88,7% des navigateurs actuellement (octobre 2015) utilisés.

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

Je trouve que si vous utilisez beaucoup d'espaces, le navigateur l'enveloppera correctement. Ne vous inquiétez pas d'utiliser un nombre exact d'espaces, ajoutez-en simplement beaucoup, et le navigateur devrait correctement envelopper le premier caractère non espace de la ligne suivante.

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

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

Ajoutez d'abord la première ligne de votre espace réservé 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 souhaitez conserver vos lignes à un seul endroit, vous pouvez essayer ce qui suit. L'inconvénient est que d'autres navigateurs que Chrome, Safari, Webkit-etc. ne montre 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";
}

Démo Fiddle

Ce serait très bien, si tel était le cas, une démo similaire pouvait fonctionner sur Firefox.

Si vous utilisez AngularJS, vous pouvez simplement utiliser des accolades pour y placer ce que vous voulez: Voici un violon.

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

Selon MDN ,

Les retours chariot ou les sauts de ligne dans le texte de l'espace réservé doivent être traités comme des sauts de ligne lors du rendu de l'indice.

Cela signifie que si vous passez simplement à une nouvelle ligne, elle doit être rendue correctement. C'est à dire

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

devrait rendre comme ceci:

La spécification html5 rejette expressément les nouvelles lignes dans le champ d'espace réservé. Les versions de Webkit / vont / insérer de nouvelles lignes lorsqu'elles sont présentées avec des sauts de ligne dans l'espace réservé, cependant, il s'agit d'un comportement incorrect et ne doit pas être invoqué.

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

Réagir:

Si vous utilisez React, vous pouvez le faire comme suit:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

Si vous textareaavez une largeur statique, vous pouvez utiliser une combinaison d'espace insécable et d'habillage automatique de zone de texte. Remplacez simplement les espaces par nbsp pour chaque ligne et assurez-vous que deux lignes voisines ne peuvent pas tenir en une. En pratique line length > cols/2.

Ce n'est pas la meilleure solution, mais pourrait être la seule solution multi-navigateurs.

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>

Vous pouvez essayer d'utiliser CSS, cela fonctionne pour moi. L'attribut placeholder=" "est obligatoire ici.

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>

en php avec la fonction chr (13):

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

Je ne pense pas que ce soit possible avec html / css seul. Cela pourrait être possible en utilisant JavaScript ou un autre type de piratage - des espaces supplémentaires pour pousser le texte à la ligne suivante, etc.

Bootstrap + contenteditable + espace réservé multiligne

Démo: https://jsfiddle.net/39mptojs/4/

basé sur les réponses @cyrbil et @daniel

Utilisation de Bootstrap, jQuery et https://github.com/gr2m/bootstrap-expandable-input pour activer l'espace réservé dans contenteditable.

En utilisant le javascript "placeholder replace" et en ajoutant "white-space: pre" au css, un espace réservé multiligne est affiché.

Html:

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

Javascript:

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

Css:

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}

La solution de filigrane dans le message d'origine fonctionne très bien. Merci pour cela. Au cas où quelqu'un en aurait besoin, voici une directive angulaire pour cela.

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());