Können Sie einen mehrzeiligen HTML5-Platzhaltertext in einem & lt; textarea & gt ;?

Den Spezifikation nicht erlauben, Zeilenvorschub oder Wagenrücklauf-Zeichen.

Den Platzhalter-Attribut stellt einen kurzen Hinweis (ein Wort oder einen kurzen
Satz) sollen helfen, den Benutzer mit der Dateneingabe. Einen Hinweis könnte ein
Beispiel Wert oder eine kurze Beschreibung des erwarteten formats. Die
Attribut, falls angegeben, muss über einen Wert verfügen, der enthält keine U+000A
LINE FEED (LF) oder U+000D CARRIAGE RETURN (CR) Zeichen.

Offenbar, die Empfehlung ist, ein title Attribut für nichts mehr.

Für eine längere Tipp-oder anderen Beratungs-text, wird das title-Attribut ist mehr
angemessen.

BEARBEITEN (1/8/18):

Für <textarea>'s scheint dies nicht der Fall zu sein. Die Spezifikation beschreibt, dass die Wagenrücklauf + Zeilenumbrüche gemacht werden MÜSSEN, die als solche vom browser.

User-agents sollte dieser Hinweis für den Benutzer, wenn das element den Wert ist die leere Zeichenkette, und das Steuerelement wird nicht fokussiert (z.B., indem Sie Sie in eine leere unkonzentriert Kontrolle). Alle U+000D CARRIAGE RETURN U+000A (LINE FEED-Zeichen-Paare (CRLF) in die Tipp -, sowie alle anderen U+000D CARRIAGE RETURN (CR) und U+000A (LINE FEED (LF) Zeichen, die in dem Hinweis, muss behandelt werden, wie Zeilenumbrüche, die beim Rendern der Hinweis.

Siehe docs: http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder

Spiegelt sich auch auf MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

FWIW, wenn ich versuche über Chrome 63.0.3239.132, es funktioniert in der Tat, wie es sagt, es sollte.

InformationsquelleAutor der Antwort Ionuț G. Stan

Es ist tatsächlich ein hack, der es möglich macht, hinzufügen mehrzeiligen Platzhalter in den Webkit-Browsern Chrome verwendet zu arbeiten, aber in neueren Versionen wieder entfernt wurde:

Fügen Sie zunächst die erste Zeile der Platzhalter für die html5-wie üblich

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

dann fügen Sie den rest der Zeile css:

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

Wenn Sie möchten, um Ihre Linien an einem Ort, können Sie versuchen, die folgenden. Der Nachteil dieser Lösung ist, dass andere Browser als chrome, safari, webkit-etc. nicht einmal die erste Zeile:

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

dann fügen Sie den rest der Zeile css:

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

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

Demo-Fiddle

Es wäre sehr toll, wenn en.o. könnte eine ähnliche demo arbeiten an Firefox.

InformationsquelleAutor der Antwort Gottox

Wenn Sie mit AngularJS, können Sie verwenden Sie einfach Klammern, um Platz, was Sie möchten: Hier ist ein Turnschuh.

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

InformationsquelleAutor der Antwort ross_troha

Ich glaube nicht, das ist möglich mit html/css allein. Möglich sein könnte, mithilfe von JavaScript oder eine andere Art von hack - extra Räume schieben Sie den text in die nächste Zeile, usw.

InformationsquelleAutor der Antwort TLD

in php mit der Funktion 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>';

InformationsquelleAutor der Antwort Vlad

Wasserzeichen Lösung in der original-post funktioniert Super. Vielen Dank für es.
Falls jemand es noch braucht, hier ist ein Winkel-Richtlinie.

(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'));
              }
            }
          }
        }
      };
    });
}());

InformationsquelleAutor der Antwort Yura Fedoriv