¿Puede tener texto de marcador de posición HTML5 multilínea en a?

En la mayoría de los navegadores (ver detalle a continuación), editar el 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 debería esperar que funcione en el futuro (editar: funciona).

Este ejemplo reemplaza todo el marcador de posición del área de texto 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>

Basado en los comentarios, parece que algunos navegadores aceptan este hack y otros no lo hagas.
Este es el resultado de las pruebas que ejecuté (con browsertshots 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

Basado en estadísticas , esto significa que funciona sobre 88.7% de la actualidad (Oct 2015) navegadores usados.

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

Encuentro que si usas muchos espacios, el navegador lo envolverá correctamente. No se preocupe por usar un número exacto de espacios, simplemente agregue muchos allí, y el navegador debe envolver correctamente el primer carácter sin espacio en la siguiente línea.

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

Hay un truco real que hace posible 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 agrega 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 solo lugar, puede probar lo siguiente. La desventaja de esto es que otros navegadores que chrome, safari, webkit-etc. ni siquiera aparezcas. la primera línea:

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

Luego agrega 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 muy bueno, si s. o.podría conseguir una demostración similar trabajando en Firefox.

El html5 spec rechaza expresamente las nuevas líneas en el campo place holder. Las versiones de Webkit /insertarán/ nuevas líneas cuando se presenten con fuentes 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;)

Si su textarea tiene un ancho estático, puede usar una combinación de espacio sin interrupción y envoltura automática de área de texto. Simplemente reemplace espacios a 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>

Si estás usando AngularJS, simplemente puedes usar llaves para colocar lo que quieras en él: Aquí hay un violín.

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

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

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

No creo que eso sea posible solo con html/css. Podría ser posible usar JavaScript o algún otro tipo de hack - espacios adicionales para empujar el texto a la siguiente línea, etc.

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

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

Basado en la respuesta de @cyrbil y @daniel

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

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

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

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

React:

Si estás usando React, puedes hacerlo de la siguiente manera:

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

Solución de marca de agua en el post original funciona muy bien. Gracias por ello. 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'));
              }
            }
          }
        }
      };
    });
}());