Puoi avere un testo segnaposto HTML5 multilinea in una <testoarea>?

Ho un testo fantasma nei campi di testo che scompare quando ti concentri su di loro usando l'attributo segnaposto HTML5:

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

Voglio usare lo stesso meccanismo per avere un testo segnaposto multilinea in un'area di testo, forse qualcosa del genere:

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

Ma quelli vengono \nmostrati nel testo e non causano nuove righe ... C'è un modo per avere un segnaposto multilinea?

AGGIORNAMENTO : L'unico modo per farlo funzionare è stato utilizzare il plug-in jQuery Watermark , che accetta HTML nel testo segnaposto:

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

Per <textarea>s spec delinea specificamente che le interruzioni ritorni a capo + linea nel l'attributo segnaposto deve essere reso come interruzioni di linea da parte del browser.

Gli interpreti dovrebbero presentare questo suggerimento all'utente quando il valore dell'elemento è la stringa vuota e il controllo non è focalizzato (ad es. Visualizzandolo all'interno di un controllo vuoto non focalizzato). Tutte le coppie di caratteri U + 000D RITORNO CARRELLO U + 000A LINE FEED (CRLF) nel suggerimento, così come tutti gli altri caratteri U + 000D CARRIAGE RETURN (CR) e U + 000A LINE FEED (LF) nel suggerimento, devono essere trattati come interruzioni di riga durante il rendering del suggerimento.

Riflesso anche su MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, quando provo su Chrome 63.0.3239.132, funziona davvero come dice che dovrebbe.

Sulla maggior parte dei browser (vedi dettagli sotto), la modifica del segnaposto in javascript consente il segnaposto multilinea. Come è stato detto, non è conforme alle specifiche e non dovresti aspettarti che funzioni in futuro (modifica: funziona).

Questo esempio sostituisce tutti i segnaposto di textarea su più righe.

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>

_{Snippet JsFiddle .}

Sulla base dei commenti sembra che alcuni browser accettino questo hack e altri no.
Questi sono i risultati dei test che ho eseguito (con browsertshots e browserstack )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (i risultati variano in base alla piattaforma)
• IE:> = 10
• Browser basati su KHTML: 4.8
• Safari: No (testato = Safari 8.0.6 Mac OS X 10.8)
• Opera: No (testato <= 15.0.1147.72)

Fuso con queste statistiche , ciò significa che funziona su circa l' 88,7% dei browser attualmente utilizzati (ottobre 2015) .

Aggiornamento : oggi funziona su almeno il 94,4% dei browser attualmente utilizzati (luglio 2018) .

Trovo che se usi molti spazi, il browser lo avvolgerà correttamente. Non preoccuparti di usare un numero esatto di spazi, basta buttare molto dentro e il browser dovrebbe avvolgere correttamente il primo carattere non spaziale sulla riga successiva.

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

Esiste un vero e proprio hack che consente di aggiungere segnaposto multilinea nei browser Webkit, Chrome funzionava ma nelle versioni più recenti l'hanno rimosso:

Innanzitutto aggiungi la prima riga del segnaposto a HTML5 come al solito

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

quindi aggiungi il resto della riga con css:

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

Se si desidera mantenere le linee in un punto, è possibile provare quanto segue. L'aspetto negativo di questo è che altri browser oltre a Chrome, Safari, Webkit-ecc. non mostrare nemmeno la prima riga:

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

quindi aggiungi il resto della riga con css:

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

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

Demo Fiddle

Sarebbe molto bello, se così fosse, potrebbe ottenere una demo simile lavorando su Firefox.

Se stai usando AngularJS, puoi semplicemente usare le parentesi graffe per posizionare ciò che desideri: ecco un violino.

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

Secondo MDN ,

I ritorni a capo o i feed di riga all'interno del testo segnaposto devono essere trattati come interruzioni di riga durante il rendering del suggerimento.

Ciò significa che se si salta su una nuova riga, dovrebbe essere visualizzato correttamente. ie

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

dovrebbe eseguire il rendering in questo modo:

La specifica html5 rifiuta espressamente nuove righe nel campo segnaposto. Le versioni di Webkit / inseriranno / inseriranno nuove righe quando presentate con feed di riga nel segnaposto, tuttavia si tratta di un comportamento errato e su cui non si deve fare affidamento.

Immagino che i paragrafi non siano abbastanza brevi per w3;)

Reagire:

Se stai usando React, puoi farlo come segue:

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

Se textareahai una larghezza statica puoi usare la combinazione di spazio non interrotto e avvolgimento automatico di textarea. Sostituisci semplicemente gli spazi in nbsp per ogni linea e assicurati che due linee vicine non possano inserirsi in una riga. In pratica line length > cols/2.

Questo non è il modo migliore, ma potrebbe essere l'unica soluzione cross-browser.

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

Puoi provare a usare CSS, funziona per me. L'attributo placeholder=" "è obbligatorio qui.

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

in php con la funzione 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>';

Non penso che sia possibile solo con html / css. Potrebbe essere possibile usare JavaScript o qualche altro tipo di hack: spazi extra per spingere il testo alla riga successiva, ecc.

Bootstrap + contenteditable + multiline placeholder

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

basato sulla risposta di @cyrbil e @daniel

Utilizzo di Bootstrap, jQuery e https://github.com/gr2m/bootstrap-expandable-input per abilitare il segnaposto in contenteditable.

Utilizzando javascript "sostituzione segnaposto" e aggiungendo "white-space: pre" a css, viene visualizzato il segnaposto multilinea.

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 soluzione filigrana nel post originale funziona alla grande. Grazie per questo Nel caso in cui qualcuno ne abbia bisogno, ecco una direttiva angolare per questo.

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