Segnaposto textarea HTML non visualizzato

118

Non riesco a capire cosa c'è di sbagliato nel mio markup, ma il segnaposto per l'area di testo non verrà visualizzato. Sembra che possa essere coperto con alcuni spazi vuoti e schede. Quando ti concentri sull'area di testo e cancelli da dove si posiziona il cursore, allora lascia l'area di testo, quindi appare il segnaposto corretto.Segnaposto textarea HTML non visualizzato

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

fonte

2012-04-17 rojobuffalo

sembra funzionare bene: http: // jsfiddle .net/3BzBk/... Non posizionare lo script all'esterno del corpo :) –

Quale browser stai utilizzando? Non tutti i browser supportano l'attributo segnaposto – Xharze

È sempre possibile utilizzare gli eventi onfocus e onblur per ottenere lo stesso effetto.Inoltre, puoi verificare se il segnaposto è supportato dal browser o meno usando una funzione come: placeholder isSupported() { test = document.createElement ('input'); return ('placeholder' in test); } – gentrobot

446

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

Buono:

<textarea></textarea>

Bad:

<textarea> 
    </textarea>

fonte

2012-12-27 00:34:58 Aquarelle

+38

Uomo, questa risposta è stata così semplice, non credevo che fosse vero! Ma l'ho provato per me stesso e, abbastanza sicuro, lo spazio bianco all'interno di una textarea è considerato contenuto, impedendo la visualizzazione del segnaposto. –

Se il plug-in è stato modificato, è possibile risolvere questo problema usando il metodo ['.trim'] di jQuery (http://api.jquery.com/jQuery.trim/). – SpYk3HH

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

suo 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

fonte

2012-07-05 21:44:25 matthew

Wow! Avevo il tag di textarea di chiusura sulla riga successiva, 4 spazi rientrati> 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 di textarea di apertura e di chiusura! – DOK

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

<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

fonte

2014-04-09 12:17:22

Lo spazio lo uccide? Strano. – AndrewLeonardi

Tratta lo spazio come valore. –

uso <textarea></textarea> invece di lasciare uno spazio tra l'apertura e chiusura tag come <textarea> </textarea>

fonte

2015-05-27 14:52:08 Yet

Questo aggiunge nulla che le risposte esistenti non già affrontano. – cpburnz

Ebbene, tecnicamente non deve essere sulla stessa linea fino a quando non v'è alcun carattere tra la fine ">" dal tag di inizio e dall'avvio "<" dal tag di chiusura. Cioè è necessario terminare con ...></textarea> come nell'esempio qui sotto:

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

fonte

2015-06-12 19:03:38

-1

tra l'apertura e la tag di chiusura nel nostro caso 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, è considerato come valore che sovrascrive 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>

fonte

2017-09-25 13:30:15 Yergalem

Ho avuto lo stesso problema, solo utilizzando un file .pug (simile a .jade). Mi sono reso conto che si trattava anche di un problema di spazio , dopo la fine delle parentesi di chiusura. Nel mio esempio, è necessario evidenziare il testo dopo (placeholder="YOUR MESSAGE") 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

fonte

2017-11-18 14:43:14 maudulus

Segnaposto textarea HTML non visualizzato

risposta

Problemi correlati