¿Puede tener texto de marcador de posición HTML5 multilínea en un <textarea>?

Tengo texto fantasma en los campos de texto que desaparecen cuando te enfocas en ellos usando el atributo de marcador de posición HTML5:

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

Quiero usar ese mismo mecanismo para tener texto de marcador de posición multilínea en un área de texto, tal vez algo como esto:

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

Pero esos \ns aparecen en el texto y no causan nuevas líneas ... ¿Hay alguna manera de tener un marcador de posición multilínea?

ACTUALIZACIÓN : La única forma de hacer que esto funcione fue utilizando el complemento jQuery Watermark , que acepta HTML en el texto del marcador de posición:

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

En <textarea>el caso de la especificación, se describe específicamente que el retorno de carro + saltos de línea en el atributo de marcador de posición DEBE representarse como saltos de línea por el navegador.

Los agentes de usuario deben presentar esta sugerencia al usuario cuando el valor del elemento es la cadena vacía y el control no está enfocado (por ejemplo, mostrándolo dentro de un control desenfocado en blanco). Todos los caracteres U + 000D RETURN CARRIAGE U + 000A LINE FEED (CRLF) en la sugerencia, así como todos los demás caracteres U + 000D CARRIAGE RETURN (CR) y U + 000A LINE FEED (LF) en la sugerencia, deben tratarse como saltos de línea al representar la pista.

También se refleja en MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, cuando pruebo Chrome 63.0.3239.132, de hecho funciona como dice que debería.

En la mayoría de los navegadores (consulte los detalles a continuación), la edición del marcador de posición en JavaScript permite el marcador de posición multilínea. Como se ha dicho, no cumple con la especificación y no debe esperar que funcione en el futuro (editar: funciona).

Este ejemplo reemplaza a todos los marcadores de posición de textarea multilínea.

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>

_{Fragmento JsFiddle .}

Según los comentarios, parece que algunos navegadores aceptan este truco y otros no.
Estos son los resultados de las pruebas que ejecuté (con browserrtshots y browserstack )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (los resultados varían según la plataforma)
• IE:> = 10
• Navegadores basados ​​en KHTML: 4.8
• Safari: No (probado = Safari 8.0.6 Mac OS X 10.8)
• Opera: No (probado <= 15.0.1147.72)

Fusionada con estas estadísticas , esto significa que funciona en aproximadamente el 88.7% de los navegadores utilizados actualmente (octubre de 2015) .

Actualización : Hoy, funciona en al menos el 94,4% de los navegadores utilizados actualmente (julio de 2018) .

Me parece que si usa muchos espacios, el navegador lo ajustará correctamente. No se preocupe por usar un número exacto de espacios, simplemente arroje mucho allí, y el navegador debería ajustarse correctamente al primer carácter que no sea espacio en la siguiente línea.

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

Existe un truco real que permite agregar marcadores de posición multilínea en los navegadores Webkit, Chrome solía funcionar, pero en versiones más recientes lo eliminaron:

Primero agregue la primera línea de su marcador de posición al html5 como de costumbre

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

luego agregue el resto de la línea por css:

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

Si desea mantener sus líneas en un lugar, puede intentar lo siguiente. La desventaja de esto es que otros navegadores que no sean Chrome, Safari, WebKit, etc. ni siquiera muestres la primera línea:

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

luego agregue el resto de la línea 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";
}

Violín de demostración

Sería genial, si es así, podría obtener una demostración similar trabajando en Firefox.

Si está usando AngularJS, simplemente puede usar llaves para colocar lo que quiera en él: aquí hay un violín.

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

De acuerdo con MDN ,

Los retornos de carro o los saltos de línea dentro del texto del marcador de posición deben tratarse como saltos de línea al representar la sugerencia.

Esto significa que si solo saltas a una nueva línea, se debe representar correctamente. Es decir

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

debería renderizar así:

La especificación html5 rechaza expresamente nuevas líneas en el campo de marcador de posición. Las versiones de Webkit / will / insert nuevas líneas cuando se presentan con saltos de línea en el marcador de posición, sin embargo, este es un comportamiento incorrecto y no se debe confiar en él.

Supongo que los párrafos no son lo suficientemente breves para w3;)

Reaccionar:

Si está utilizando React, puede hacerlo de la siguiente manera:

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

Si textareatiene un ancho estático, puede usar una combinación de espacio sin interrupciones y ajuste automático del área de texto. Simplemente reemplace los espacios en nbsp para cada línea y asegúrese de que dos líneas vecinas no puedan caber en una. En la práctica line length > cols/2.

Esta no es la mejor manera, pero podría ser la única solución 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>

Puedes intentar usar CSS, funciona para mí. El atributo placeholder=" "es obligatorio aquí.

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

en php con la función 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>';

No creo que sea posible solo con html / css. Podría ser posible usando JavaScript o algún otro tipo de pirateo: espacios adicionales para llevar el texto a la siguiente línea, etc.

Bootstrap + contenteditable + marcador de posición multilínea

Demostración: https://jsfiddle.net/39mptojs/4/

basado en la respuesta @cyrbil y @daniel

Usando Bootstrap, jQuery y https://github.com/gr2m/bootstrap-expandable-input para habilitar el marcador de posición en contenteditable.

Usando javascript "placeholder replace" y agregando "white-space: pre" a css, se muestra el marcador de posición multilínea.

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

La solución de marca de agua en la publicación original funciona muy bien. Gracias por eso. En caso de que alguien lo necesite, aquí hay una directiva angular para ello.

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