Você pode ter um texto de espaço reservado HTML5 com várias linhas em uma <textarea>?

Eu tenho texto fantasma nos campos de texto que desaparecem quando você os focaliza usando o atributo de espaço reservado do HTML5:

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

Eu quero usar esse mesmo mecanismo para ter texto de espaço reservado multilinha em uma área de texto, talvez algo como isto:

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

Mas eles \nsão exibidos no texto e não causam novas linhas ... Existe uma maneira de ter um espaço reservado multilinha?

ATUALIZAÇÃO : A única maneira de fazer isso funcionar foi utilizando o plug-in jQuery Watermark , que aceita HTML no texto do espaço reservado:

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

Para <textarea>s a especificação descreve especificamente que as quebras de retornos de carro + linha no atributo espaço reservado deve ser processado como quebras de linha pelo navegador.

Os agentes do usuário devem apresentar essa dica ao usuário quando o valor do elemento for a sequência vazia e o controle não estiver focado (por exemplo, exibindo-o dentro de um controle sem foco em branco). Todos os pares de caracteres U + 000D RETORNO DE CARRO U + 000A LINE FEED (CRLF) na dica, bem como todos os outros caracteres U + 000D CARRIAGE RETURN (CR) e U + 000A RETORNO DE CARRO (CR) e U + 000A LINE FEED (LF) na dica, devem ser tratados como quebras de linha ao renderizar a dica.

Também refletido no MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, quando tento o Chrome 63.0.3239.132, ele realmente funciona como deveria.

Na maioria dos navegadores (veja detalhes abaixo), a edição do espaço reservado em javascript permite o espaço reservado para várias linhas. Como foi dito, não é compatível com o especificação e você não deve esperar que funcione no futuro (editar: funciona).

Este exemplo substitui todos os espaços reservados da área de texto multilinha.

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>

_{JsFiddleSnippet .}

Com base nos comentários, parece que algum navegador aceita esse hack e outros não.
Estes são os resultados dos testes que eu executei (com browsertshots e browserstack )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (os resultados variam de acordo com a plataforma)
• IE:> = 10
• Navegadores baseados em KHTML: 4.8
• Safari: Não (testado = Safari 8.0.6 Mac OS X 10.8)
• Opera: Não (testado <= 15.0.1147.72)

Fundido com essas estatísticas , isso significa que ele funciona em cerca de 88,7% dos navegadores atualmente usados (outubro de 2015) .

Atualização : Hoje, ele funciona em pelo menos 94,4% dos navegadores usados atualmente (julho de 2018) .

Acho que se você usar muitos espaços, o navegador o envolverá adequadamente. Não se preocupe em usar um número exato de espaços, basta colocar muito nele, e o navegador deve agrupar corretamente o primeiro caractere não espaço na próxima linha.

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

Existe um hack real que permite adicionar espaços reservados de várias linhas nos navegadores Webkit. O Chrome costumava funcionar, mas nas versões mais recentes eles o removeram:

Primeiro, adicione a primeira linha do seu espaço reservado ao html5, como de costume

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

adicione o restante da linha por css:

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

Se você quiser manter suas linhas em um só lugar, tente o seguinte. A desvantagem disso é que outros navegadores além do chrome, safari, webkit-etc. nem mostre a primeira linha:

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

adicione o restante da linha por css:

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

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

Violino de demonstração

Seria ótimo, se assim for, poderia obter uma demonstração semelhante trabalhando no Firefox.

Se você estiver usando o AngularJS, pode simplesmente usar chaves para colocar o que quiser: aqui está um violino.

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

De acordo com a MDN ,

Retornos de carro ou feeds de linha no texto do espaço reservado devem ser tratados como quebras de linha ao renderizar a dica.

Isso significa que, se você pular para uma nova linha, ela deverá ser renderizada corretamente. Ou seja,

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

deve renderizar assim:

A especificação html5 rejeita expressamente novas linhas no campo marcador de posição. Versões do Webkit / will / inserem novas linhas quando apresentadas com feeds de linha no espaço reservado, no entanto, esse é um comportamento incorreto e não deve ser considerado.

Eu acho que os parágrafos não são breves o suficiente para o w3;)

Reagir:

Se você estiver usando o React, poderá fazer o seguinte:

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

Se você textareatem uma largura estática, pode usar a combinação de espaço sem quebra e quebra automática de área de texto. Apenas substitua espaços para nbsp por cada linha e verifique se duas linhas vizinhas não podem caber em uma. Na prática line length > cols/2.

Essa não é a melhor maneira, mas pode ser a única solução entre navegadores.

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

Você pode tentar usar CSS, funciona para mim. O atributo placeholder=" "é obrigatório aqui.

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

em php com a função 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>';

Eu não acho que isso é possível apenas com html / css. Pode ser possível usar JavaScript ou algum outro tipo de hack - espaços extras para enviar o texto para a próxima linha, etc.

Espaço reservado para inicialização + conteúdo editável + multilinhas

Demonstração: https://jsfiddle.net/39mptojs/4/

com base nas respostas @cyrbil e @daniel

Usando o Bootstrap, jQuery e https://github.com/gr2m/bootstrap-expandable-input para ativar o espaço reservado no contenteditable.

Usando o javascript "placeholder replace" e adicionando "white-space: pre" ao css, o placeholder multilinha é mostrado.

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

Solução de marca d'água no post original funciona muito bem. Obrigado por isso. Caso alguém precise, aqui está uma diretiva angular.

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