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


153

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

IE sembra gestirlo correttamente. Firefox OTOH ignora solo le nuove righe
ekkis il

1
stackoverflow.com/questions/7312623/… è una domanda molto simile con buone risposte.
Lloyd Dewolf,

se lo stai riscontrando e stai usando js per impostare il valore, controlla css white-spaceper assicurarti che sia impostato correttamente, ad esempio pre-wrapping
Cory Mawhorter,

Da quell'altra domanda: &#10;funziona ovunque tranne Safari.
Sphinxxx,

Risposte:


82

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.


37
ad eccezione del fatto che l'attributo title non si comporta allo stesso modo, cioè non mostra il contenuto fantasma. infatti sarebbe perfettamente appropriato per i segnaposto supportare più righe per le aree di testo poiché le aree di testo sono creature multilinea. peccato che le specifiche non lo consentano. Immagino che gli hack dovranno fare. sospiro
ekkis il

71

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 .

Risultato atteso

Risultato atteso


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


1
Quell'esempio jsfiddle non funziona affatto ... È solo multilinea perché la dimensione dell'area di testo.
sebnukem,

2
C'è un errore di battitura, ma non posso modificarlo perché StackOverflow mi dà questo errore "Le modifiche devono essere di almeno 6 caratteri". La classe dovrebbe essere multilinenonmultiligne
Daniel Loureiro

@sebnukem: funziona sulla maggior parte dei browser che ho provato. E non è una questione di dimensioni di textarea. Potete fornire ulteriori informazioni sul problema che avete riscontrato?
Cyrbil,

Sembra non funzionare su Safari sembra ... - il \ n scompare ma tutto è su una sola riga
Hackeron

1
@Jroonk: posso confermarlo. Non è dovuto a Chrome ma a Apple costringe qualsiasi browser a utilizzare i suoi IOS WKWebView. Successivamente, qualsiasi browser su IOS non eseguirà correttamente questo hack fino a quando WKWebViewnon lo farà.
Cyrbil,

59

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>

2
I segnaposto multilinea non sono supportati dal browser, hanno scoperto che l'ultimo safari supporta ma non è supportato su IOS5
Tom

7
che non funziona per me né su Internet Explorer né su Windows Firefox. inserisce semplicemente gli spazi in cui l'ho chiesto
ekkis il

Chrome 37 sta visualizzando il testo segnaposto in un'area di testo senza rimuovere le nuove righe. Qualcuno sa qual è il nome della "caratteristica" in modo che io possa a) cercarla eb) verificarla?
Ben

23

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.


grazie per aver fornito il link violino. semplifica la verifica del comportamento in vari browser. su IE 10 entrambe le versioni falliscono, così come su FF 12 (Windows). peccato che. Safari 6.1 funziona :(
ekkis il

Non funziona più in Chrome - da molto tempo, immagino.
Mike Rockétt,

6

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>

1
Sto usando un approccio simile ma non funziona in Safari e Firefox
stan

6

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:

inserisci qui la descrizione dell'immagine


3

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


1
Il comportamento di Webkit non è errato poiché la specifica non dice cosa deve succedere se esiste CR / LF.
Christian,

1
@Christian Lo fa ora, dice "I programmi utente dovrebbero presentare questo suggerimento all'utente, dopo averne interrotto le interruzioni di linea ...". Dice questo sulle interruzioni di riga di stripping: "Quando un agente utente deve eliminare le interruzioni di linea da una stringa, l'agente utente deve rimuovere tutti i caratteri" LF "(U + 000A) e" CR "(U + 000D) da quella stringa. ".
Richard Turner,

Questa risposta non è più vera. Le specifiche ora richiedono espressamente che le interruzioni di riga nel segnaposto vengano visualizzate come interruzioni di riga.
Clonkex,

3

Reagire:

Se stai usando React, puoi farlo come segue:

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

2

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>


1

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>

1

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

0

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.


0

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

-1

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'));
              }
            }
          }
        }
      };
    });
}());
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.