He intentado algunos enfoques pero ninguno funcionó. ¿Alguien sabe un truco ingenioso para evitar esto?

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

ACTUALIZACIÓN: No funciona en cromo. Era solo el ancho del área de texto.

Ver: http://jsfiddle.net/pdXRx/

Lo que podría hacer es agregar el texto como value, que respeta el salto de línea \n.

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

Luego, puede quitarlo focusy volver a aplicarlo (si está vacío) blur. Algo como esto

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

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

No es CSS puro y no está limpio, pero funciona.

Puede insertar una nueva entidad html de línea 
dentro del atributo de marcador de posición:

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

Funciona en: Chrome 62, IE10, Firefox 60

No funciona en: Safari 11

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

No piense que puede hacer eso: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

El contenido relevante (énfasis mío):

El atributo de marcador de posición representa una pista breve (una palabra o frase corta) destinada a ayudar al usuario con la entrada de datos cuando el control no tiene ningún valor. Una sugerencia podría ser un valor de muestra o una breve descripción del formato esperado. El atributo, si se especifica, debe tener un valor que no contenga caracteres U + 000A LINE FEED (LF) o U + 000D CARRIAGE RETURN (CR).

ACTUALIZACIÓN (enero de 2016): El pequeño truco podría no funcionar en todos los navegadores, así que tengo una nueva solución con un poco de JavaScript a continuación.

Un pequeño truco agradable

No se siente bien, pero puedes poner las nuevas líneas en el html. Me gusta esto:

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

Observe que cada línea está en una nueva línea (no se está ajustando) y cada sangría de 'tabulación' tiene 4 espacios. De acuerdo, no es un método muy bueno, pero parece funcionar:

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

• Es probable que el nivel de sangría de cada línea varíe según el ancho del área de texto.
• Es importante tener resize: none;en el CSS para que el tamaño del área de texto sea fijo (Ver jsfiddle).

Alternativamente, cuando desee una nueva línea, presione Intro dos veces (Por lo tanto, hay una línea vacía entre sus 'nuevas líneas'. Esta 'línea vacía' creada debe tener suficientes pestañas / espacios que equivalen al ancho de su área de texto. Parece que no importa si tienes demasiados, solo necesitas lo suficiente. Sin embargo, esto es muy sucio y probablemente no sea compatible con el navegador. ¡Ojalá hubiera una manera más fácil!

Una mejor solución

Mira el JSFiddle .

• Esta solución coloca un div detrás del área de texto.
• Algunos javascript se utilizan para cambiar el color de fondo del área de texto, ocultando o revelando el marcador de posición de manera adecuada.
• Las entradas y los marcadores de posición deben tener los mismos tamaños de fuente, de ahí que los dos mixins.
• Las propiedades box-sizingy display: blocken el área de texto son importantes o el div detrás de él no será del mismo tamaño.
• La configuración resize: verticaly una min-heighten el área de texto también son importantes: observe cómo el texto del marcador de posición se ajustará y expandir el área de texto mantendrá el fondo blanco. Sin embargo, comentar la resizepropiedad causará problemas al expandir el área de texto horizontalmente.
• Solo asegúrese de que la altura mínima en el área de texto sea suficiente para cubrir todo el marcador de posición en su ancho más pequeño. **

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

¿Qué tal una solución CSS: 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




Funciona para Google Chrome

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

Probé esto en Windows 10.0 (compilación 10240) y Google Chrome versión 47.0.2526.80 m

08:43:08 AST 6 Rabi Al-Awwal, 1437 jueves, 17 de diciembre de 2015

Gracias

Agregue solo & # 10 para romper la línea, no es necesario escribir CSS ni JavaScript.

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>

Vieja respuesta:

No, no puedes hacer eso en el atributo de marcador de posición. Ni siquiera puede codificar html nuevas líneas como 
en un marcador de posición.

Nueva respuesta:

Los navegadores modernos le ofrecen varias formas de hacerlo. Ver este JSFiddle:

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

El uso 
en lugar de \nesto cambiará la línea.

Prueba esto:

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

http://jsfiddle.net/vr79B/

No puede hacerlo con HTML puro, pero este complemento jQuery le permitirá: https://github.com/bradjasper/jQuery-Placeholder-Newlines

Una versión ligeramente mejorada de la respuesta de Jason Gennaro (ver comentarios de código):

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

Me gustó el trabajo de Jason Gennaro y Denis Golomazov, pero quería algo que fuera más útil a nivel mundial. He modificado el concepto para que pueda agregarse a cualquier página sin repercusiones.

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>

El javascript es muy simple

<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 respeta el atributo de espacio en blanco para el marcador de posición. https://www.w3schools.com/cssref/pr_text_white-space.asp

Establecerlo en la línea previa me resolvió el problema.

textarea {
  white-space: pre-line;
}

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

Modifiqué el violín de @Richard Bronosky de esta manera .

Es mejor utilizar el data-*atributo en lugar de un atributo personalizado. He sustituido <textarea placeholdernl>a <textarea data-placeholder>y algunos otros estilos también.

editado
Aquí está la respuesta original de Richard que contiene un fragmento de código completo.

muy simple

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

valor representa la cadena original

Echa un vistazo a esta solución con marcador de posición personalizado.

• Obtiene un marcador de posición multilínea que funciona en todos los navegadores (incluido Firefox)
• Es posible personalizar el marcador de posición como quieras

Demo en el violín .

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

No me gusta ocultar el marcador de posición cuando enfocas el área de texto. Así que hice una función de constructor Placeholderque se parece exactamente al marcador de posición incorporado y funciona también en otros navegadores que Google Chrome. Es muy conveniente porque puede usar la Placeholderfunción tantas veces como lo desee y ni siquiera necesita jQuery.

EDITAR:

Ahora también maneja casos especiales, como insertar el marcador de posición, correctamente.

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>

Este problema puede abordarse utilizando el selector que se muestra en el marcador de posición y los fondos superpuestos, si su implementación permite:

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

Selector de soporte:

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