Il segnaposto textarea HTML5 non viene visualizzato

183

Non riesco a capire cosa c'è di sbagliato nel mio markup, ma il segnaposto per l'area di testo non verrà visualizzato. Sembra che potrebbe essere coperto con alcuni spazi vuoti e schede. Quando ti concentri sull'area di testo ed elimini da dove si posiziona il cursore, quindi lasci l'area di testo, viene visualizzato il segnaposto corretto.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

— rojobuffalo
fonte

2

Sembra funzionare bene: jsfiddle.net/3BzBk ... Non posizionare la sceneggiatura fuori dal corpo :)

— Marco Johannesen,

2

Quale browser stai usando? Non tutti i browser supportano l'attributo segnaposto

— Xharze,

Puoi sempre utilizzare gli eventi onfocus e onblur per ottenere lo stesso effetto. Inoltre, è possibile verificare se il segnaposto è supportato dal browser o meno utilizzando una funzione come: function placeholderIsSupported () {test = document.createElement ('input'); ritorno ("segnaposto" nel test); }

— gentrobot,

1

@MarcoJohannesen Grazie! Non posso ancora dire esattamente cosa è diverso, ma ora funziona.

— rojobuffalo,

1

@ user1338065 Super. È stato perché è stato posizionato fuori dal corpo o?

— Marco Johannesen,

671

Questo è sempre stato un gotcha per me e molti altri. In breve, i tag di apertura e chiusura per l' <textarea>elemento devono trovarsi sulla stessa riga, altrimenti un carattere di nuova riga lo occupa. Il segnaposto non verrà quindi visualizzato poiché l'area di input contiene contenuto (un carattere di nuova riga è, tecnicamente, contenuto valido).

Buona:

<textarea></textarea>

Male:

<textarea>
</textarea>

Aggiornamento (2020)

Questo non è più vero , secondo le specifiche di analisi HTML5:

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

Tuttavia, potresti comunque avere problemi se il tuo editore insiste sulle linee di arrivo con CRLF.

— Aquarelle
fonte

66

Amico, questa risposta è stata così semplice, non credevo fosse vera! Ma l'ho testato da solo e, sicuramente, lo spazio bianco all'interno di un'area di testo è considerato contenuto, impedendo che il segnaposto venga visualizzato.

— Eric L.

Se il plug-in è stato modificato, è possibile risolvere questo problema utilizzando il .trimmetodo di jQuery .

— SpYk3HH,

Un esempio, sarebbe semplicemente aggiungere un pezzo a JS (prima o dopo la chiamata al plugin, non importa) che assomiglia a quanto segue:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

Inoltre, quando si crea un nuovo elemento textarea dopo il caricamento del DOM, assicurarsi di includere il tag di chiusura />anziché >. Esempio:$('body').html('<textarea placeholder="test" />');

— degenerato il

se c'è uno spazio all'interno <textarea>, significa che l'area di testo non è vuota, quindi non è utile per un segnaposto. :)

— Edu Ruiz,

43

Elimina tutti gli spazi e le interruzioni di riga tra i tag di <textarea>apertura e chiusura </textarea>.

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

— Sviluppatore principale
fonte

Lo spazio lo uccide? Strano.

— AndrewLeonardi,

2

Considera lo spazio come un valore.

— Sviluppatore principale

9

è perché c'è uno spazio da qualche parte. Stavo usando jsfiddle e c'era uno spazio dopo il tag. Dopo aver eliminato lo spazio ha iniziato a funzionare

— Matteo
fonte

Wow! Avevo il tag textarea di chiusura sulla riga successiva, rientrato di 4 spazi> quegli spazi invisibili sono nella textarea, ma non me ne sono reso conto fino a quando non ho provato a usare il segnaposto. Nessuno spazio tra i tag textarea di apertura e chiusura!

— DOK,

5

Bene, tecnicamente non deve trovarsi sulla stessa riga fintanto che non vi è alcun carattere tra la fine ">" dal tag iniziale e l'inizio "<" dal tag finale. Cioè devi finire ...></textarea>come nell'esempio seguente:

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

— Conny P
fonte

3

So che a Aquarelle è stato (molto bene) risposto a questo post, ma nel caso qualcuno abbia questo problema con altri moduli tag senza testo come input, lo lascerò qui:

Se si dispone di un input nel modulo e il segnaposto non viene visualizzato perché all'inizio è presente uno spazio bianco, ciò può essere causato dall'attributo "valore". Nel caso in cui si utilizzino variabili per riempire il valore di un input, verificare che non vi siano spazi bianchi tra le virgole e le variabili.

esempio usando un ramoscello per php framework symfony:

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder

In questo caso il tag tra {{}} è la variabile, assicurati solo di non lasciare spazi tra le virgole perché anche lo spazio bianco è un carattere valido.

— SpicyTacos23
fonte

2

usa <textarea></textarea>invece di lasciare uno spazio tra i tag di apertura e chiusura come<textarea> </textarea>

— Ancora
fonte

4

Ciò non aggiunge nulla che le risposte esistenti non siano già indirizzate.

— Tutti i lavoratori sono essenziali

0

Tra il tag di apertura e di chiusura nel nostro caso il tag textarea non dovrebbe essere spazio o carattere di nuova riga o qualsiasi testo (valore).

Se c'è spazio, carattere di nuova riga o qualsiasi testo, viene considerato come valore che sostituisce il segnaposto.

    **PlaceHolder Appears**
    <textarea placeholder="Am Default Message"></textarea>

    **PlaceHolder Doesn't Appear**

    <textarea placeholder="Am Default Message">  </textarea>
   <textarea placeholder="Am Default Message"> 
   </textarea>
   <textarea placeholder="Am Default Message">Something</textarea>

— Yergalem
fonte

0

Ho avuto lo stesso problema, usando solo un .pugfile (simile a .jade). Mi sono reso conto che era anche un problema di spazio , dopo la fine delle parentesi chiuse. Nel mio esempio, è necessario evidenziare il testo dopo (placeholder="YOUR MESSAGE")per vedere:

PRIMA:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

DOPO:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

— maudulus
fonte

-1

Quindi, la domanda ora è come precompilare l'elemento textarea? XYZ, otterrai:

Il problema principale è che nell'elemento textarea stiamo precompilando involontariamente l'elemento con uno spazio bianco.

— hani
fonte