Können Sie mehrzeiligen HTML5-Platzhaltertext in einem <Textbereich> haben?

Ich habe Geistertext in Textfeldern, der verschwindet, wenn Sie sich mit dem Platzhalterattribut von HTML5 auf sie konzentrieren:

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

Ich möchte denselben Mechanismus verwenden, um mehrzeiligen Platzhaltertext in einem Textbereich zu haben, vielleicht so etwas:

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

Aber diese \nwerden im Text angezeigt und verursachen keine Zeilenumbrüche ... Gibt es eine Möglichkeit, einen mehrzeiligen Platzhalter zu haben?

UPDATE : Die einzige Möglichkeit, dies zum Laufen zu bringen, war die Verwendung des jQuery Watermark-Plugins , das HTML im Platzhaltertext akzeptiert:

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

Für <textarea>s beschreibt die Spezifikation speziell, dass Wagenrückgaben + Zeilenumbrüche im Platzhalterattribut vom Browser als Zeilenumbrüche gerendert werden MÜSSEN.

Benutzeragenten sollten diesen Hinweis dem Benutzer präsentieren, wenn der Wert des Elements die leere Zeichenfolge ist und das Steuerelement nicht fokussiert ist (z. B. indem es in einem leeren, nicht fokussierten Steuerelement angezeigt wird). Alle Zeichenpaare U + 000D CARRIAGE RETURN U + 000A LINE FEED (CRLF) im Hinweis sowie alle anderen Zeichen U + 000D CARRIAGE RETURN (CR) und U + 000A LINE FEED (LF) im Hinweis müssen behandelt werden als Zeilenumbrüche beim Rendern des Hinweises.

Auch auf MDN reflektiert: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, wenn ich Chrome 63.0.3239.132 anprobiere, funktioniert es tatsächlich so, wie es sollte.

In den meisten Browsern (siehe Details unten) ermöglicht das Bearbeiten des Platzhalters in Javascript einen mehrzeiligen Platzhalter. Wie gesagt, es entspricht nicht der Spezifikation und Sie sollten nicht erwarten, dass es in Zukunft funktioniert (Bearbeiten: es funktioniert).

Dieses Beispiel ersetzt den Platzhalter aller mehrzeiligen Textbereiche.

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>

_{JsFiddle- Snippet.}

Basierend auf Kommentaren scheint es, dass einige Browser diesen Hack akzeptieren und andere nicht.
Dies sind die Ergebnisse von Tests, die ich durchgeführt habe (mit Browser- Shots und Browserstack ).

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (Ergebnisse variieren je nach Plattform)
• IE:> = 10
• KHTML-basierte Browser: 4.8
• Safari: Nein (getestet = Safari 8.0.6 Mac OS X 10.8)
• Opera: Nein (getestet <= 15.0.1147.72)

Zusammen mit diesen Statistiken bedeutet dies, dass es auf etwa 88,7% der derzeit (Oktober 2015) verwendeten Browser funktioniert .

Update : Heute funktioniert es in mindestens 94,4% der derzeit (Juli 2018) verwendeten Browser.

Ich finde, wenn Sie viele Leerzeichen verwenden, wird der Browser es richtig umbrechen. Machen Sie sich keine Sorgen über die genaue Anzahl von Leerzeichen, werfen Sie einfach viel hinein, und der Browser sollte das erste Nicht-Leerzeichen in der nächsten Zeile ordnungsgemäß umbrechen.

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

Es gibt tatsächlich einen Hack, der es ermöglicht, mehrzeilige Platzhalter in Webkit-Browsern hinzuzufügen. Chrome funktionierte früher, wurde jedoch in neueren Versionen entfernt:

Fügen Sie zunächst wie gewohnt die erste Zeile Ihres Platzhalters zum HTML5 hinzu

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

Fügen Sie dann den Rest der Zeile per CSS hinzu:

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

Wenn Sie Ihre Zeilen an einem Ort behalten möchten, können Sie Folgendes versuchen. Der Nachteil dabei ist, dass andere Browser als Chrome, Safari, Webkit usw. zeige nicht einmal die erste Zeile:

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

Fügen Sie dann den Rest der Zeile per CSS hinzu:

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

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

Demo Geige

Es wäre sehr großartig, wenn so eine ähnliche Demo auf Firefox funktionieren könnte.

Wenn Sie AngularJS verwenden, können Sie einfach Klammern verwenden, um alles zu platzieren, was Sie möchten: Hier ist eine Geige.

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

Nach MDN ,

Zeilenumbrüche oder Zeilenvorschübe im Platzhaltertext müssen beim Rendern des Hinweises als Zeilenumbrüche behandelt werden.

Dies bedeutet, dass wenn Sie nur zu einer neuen Zeile springen, diese korrekt gerendert werden sollte. Dh

<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> 

sollte so rendern:

Die HTML5-Spezifikation lehnt neue Zeilen im Platzhalterfeld ausdrücklich ab. Versionen von Webkit / werden / neue Zeilen einfügen, wenn Zeilenvorschübe im Platzhalter angezeigt werden. Dies ist jedoch ein falsches Verhalten und sollte nicht als verlässlich angesehen werden.

Ich denke Absätze sind nicht kurz genug für w3;)

Reagieren:

Wenn Sie React verwenden, können Sie dies wie folgt tun:

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

Wenn Sie textareaeine statische Breite haben, können Sie eine Kombination aus nicht unterbrechendem Raum und automatischem Umbrechen des Textbereichs verwenden. Ersetzen Sie einfach die Leerzeichen für jede Zeile durch nbsp und stellen Sie sicher, dass zwei Nachbarzeilen nicht in eine passen. In der Praxis line length > cols/2.

Dies ist nicht der beste Weg, könnte aber die einzige browserübergreifende Lösung sein.

<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>

Sie können versuchen, CSS zu verwenden, es funktioniert für mich. Das Attribut placeholder=" "wird hier benötigt.

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

in PHP mit 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>';

Ich denke nicht, dass dies mit HTML / CSS allein möglich ist. Könnte mit JavaScript oder einer anderen Art von Hack möglich sein - zusätzliche Leerzeichen, um den Text in die nächste Zeile zu verschieben usw.

Bootstrap + contenteditable + mehrzeiliger Platzhalter

Demo: https://jsfiddle.net/39mptojs/4/

basierend auf der Antwort von @cyrbil und @daniel

Verwenden von Bootstrap, jQuery und https://github.com/gr2m/bootstrap-expandable-input , um Platzhalter in contenteditable zu aktivieren.

Bei Verwendung von Javascript "Platzhalter ersetzen" und Hinzufügen von "Leerzeichen: vor" zu CSS wird ein mehrzeiliger Platzhalter angezeigt.

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;
}

Die Wasserzeichenlösung im Originalbeitrag funktioniert hervorragend. Danke dafür. Falls jemand es braucht, hier ist eine Winkelanweisung dafür.

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