Ich habe ein paar Ansätze ausprobiert, aber keiner hat funktioniert. Kennt jemand den raffinierten Trick, um das zu umgehen?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

UPDATE: Es funktioniert nicht in Chrom. Es war nur die Breite des Textbereichs.

Siehe: http://jsfiddle.net/pdXRx/

Sie können den Text als hinzufügen value, wobei der Zeilenumbruch berücksichtigt wird \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Dann können Sie es entfernen focusund wieder auftragen (falls leer) blur. Etwas wie das

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

Beispiel: http://jsfiddle.net/airandfingers/pdXRx/247/

Nicht reines CSS und nicht sauber, aber macht den Trick.

Sie können eine neue HTML-Zeilenentität 
in das Platzhalterattribut einfügen :

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Funktioniert auf: Chrome 62, IE10, Firefox 60

Funktioniert nicht bei: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

Denken Sie nicht, dass Sie das dürfen: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

Der relevante Inhalt (Schwerpunkt Mine):

Das Platzhalterattribut stellt einen kurzen Hinweis (ein Wort oder eine kurze Phrase) dar, der den Benutzer bei der Dateneingabe unterstützen soll, wenn das Steuerelement keinen Wert hat. Ein Hinweis kann ein Beispielwert oder eine kurze Beschreibung des erwarteten Formats sein. Das Attribut muss, falls angegeben, einen Wert haben, der keine Zeichen für U + 000A LINE FEED (LF) oder U + 000D CARRIAGE RETURN (CR) enthält.

UPDATE (Jan 2016): Der nette kleine Hack funktioniert möglicherweise nicht mehr in allen Browsern, daher habe ich unten eine neue Lösung mit ein wenig Javascript.

Ein schöner kleiner Hack

Es fühlt sich nicht gut an, aber Sie können einfach die neuen Zeilen in den HTML-Code einfügen. So was:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

Beachten Sie, dass sich jede Zeile in einer neuen Zeile befindet (nicht umbrochen wird) und jeder Tabulator-Einzug 4 Leerzeichen enthält. Zugegeben, es ist keine sehr schöne Methode, aber es scheint zu funktionieren:

http://jsfiddle.net/01taylop/HDfju/

• Es ist wahrscheinlich, dass die Einrückungsstufe jeder Zeile abhängig von der Breite Ihres Textbereichs variiert.
• Es ist wichtig, resize: none;in der CSS zu haben, damit die Größe des Textbereichs festgelegt ist (siehe jsfiddle).

Alternativ Wenn Sie eine neue Linie wollen, drücken die Eingabetaste zweimal (So gibt es eine leere Zeile zwischen ‚neuen Linien‘. Diese ‚leere Zeile‘ erstellt Bedürfnisse genug tabs / Räume aufweisen, die der Breite des Textbereich entsprechen würde. Es spielt keine Es scheint nicht wichtig zu sein, wenn Sie viel zu viele haben, Sie brauchen nur genug. Dies ist jedoch so schmutzig und wahrscheinlich nicht browserkonform. Ich wünschte, es gäbe einen einfacheren Weg!

Eine bessere Lösung

Schauen Sie sich die JSFiddle an .

• Diese Lösung positioniert ein Div hinter dem Textbereich.
• Etwas Javascript wird verwendet, um die Hintergrundfarbe des Textbereichs zu ändern und den Platzhalter entsprechend auszublenden oder freizulegen.
• Die Eingaben und Platzhalter müssen die gleichen Schriftgrößen haben, daher die beiden Mixins.
• Die box-sizingund display: block-Eigenschaften im Textbereich sind wichtig, oder das dahinterliegende Div ist nicht gleich groß.
• Die Einstellung resize: verticalund ein min-heightZeichen im Textbereich sind ebenfalls wichtig. Beachten Sie, wie der Platzhaltertext umbrochen wird und das Erweitern des Textbereichs den weißen Hintergrund beibehält. Das Auskommentieren der resizeEigenschaft führt jedoch zu Problemen beim horizontalen Erweitern des Textbereichs.
• Stellen Sie einfach sicher, dass die Mindesthöhe auf dem Textbereich ausreicht, um Ihren gesamten Platzhalter in seiner kleinsten Breite abzudecken. **

HTML:

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

SCSS:

$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}

Javascript:

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

Wie wäre es mit einer CSS-Lösung: http://cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

Salaamun Alekum




Funktioniert für Google Chrome

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

Ich habe dies unter Windows 10.0 (Build 10240) und Google Chrome Version 47.0.2526.80 m getestet

08:43:08 AST 6 Rabi Al-Awwal, 1437 Donnerstag, 17. Dezember 2015

Danke

Fügen Sie nur & # 10 hinzu, um die Linie zu brechen. Sie müssen kein CSS oder Javascript schreiben.

textarea{
    width:300px;
    height:100px;

}

<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

Alte Antwort:

Nein, das können Sie im Platzhalterattribut nicht tun. Sie können nicht einmal HTML-Zeilenumbrüche wie 
in einem Platzhalter codieren .

Neue Antwort:

Moderne Browser bieten Ihnen verschiedene Möglichkeiten, dies zu tun. Siehe diese JSFiddle:

http://jsfiddle.net/pdXRx/5/

Die Verwendung 
anstelle \ndavon ändert die Linie.

Versuche dies:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

Sie können es nicht mit reinem HTML machen, aber mit diesem jQuery-Plugin können Sie: https://github.com/bradjasper/jQuery-Placeholder-Newlines

Eine leicht verbesserte Version der Antwort von Jason Gennaro (siehe Codekommentare):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

Ich mochte die Arbeit von Jason Gennaro und Denis Golomazov, aber ich wollte etwas, das global nützlicher wäre. Ich habe das Konzept so geändert, dass es ohne Auswirkungen zu jeder Seite hinzugefügt werden kann.

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

Das Javascript ist sehr einfach

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

HTML

<textarea data-placeholder="1111\n2222"></textarea>

JS

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

Textarea berücksichtigt das Leerzeichenattribut für den Platzhalter. https://www.w3schools.com/cssref/pr_text_white-space.asp

Das Voreinstellen hat das Problem für mich gelöst.

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

Ich habe @Richard Bronoskys Geige so modifiziert .

Es ist besser, ein data-*Attribut als ein benutzerdefiniertes Attribut zu verwenden. Ich <textarea placeholdernl>habe auch <textarea data-placeholder>einige andere Stile ersetzt.

bearbeitet
Hier ist die ursprüngliche Antwort von Richard, die den vollständigen Code-Ausschnitt enthält.

sehr einfach

  var position = your break position;
    var breakLine = "
";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

Wert repräsentiert die ursprüngliche Zeichenfolge

Testen Sie diese Lösung mit einem benutzerdefinierten Platzhalter.

• Sie erhalten einen mehrzeiligen Platzhalter, der in allen Browsern (einschließlich Firefox) funktioniert.
• Es ist möglich, Platzhalter nach Ihren Wünschen anzupassen

Demo auf Geige .

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

Ich mag es nicht, den Platzhalter zu verstecken, wenn Sie den Textbereich fokussieren. Deshalb habe ich eine Konstruktorfunktion erstellt Placeholder, die genau wie der integrierte Platzhalter aussieht und auch in anderen Browsern als Google Chrome funktioniert. Dies ist sehr praktisch, da Sie die PlaceholderFunktion so oft verwenden können, wie Sie möchten, und nicht einmal jQuery benötigen.

BEARBEITEN:

Es behandelt jetzt auch Sonderfälle wie das korrekte Einfügen des Platzhalters.

var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc && el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

<textarea id="textarea"></textarea>

Dieses Problem kann mithilfe des vom Platzhalter angezeigten Selektors und der überlagerten Hintergründe behoben werden, wenn Ihre Implementierung Folgendes zulässt:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

Auswahlunterstützung:

https://caniuse.com/#feat=css-placeholder-shown