L'espace réservé de zone de texte HTML5 n'apparaît pas

183

Je ne peux pas comprendre ce qui ne va pas avec mon balisage, mais l'espace réservé pour la zone de texte n'apparaîtra pas. Il semble qu'il puisse être recouvert d'espaces vides et d'onglets. Lorsque vous vous concentrez sur la zone de texte et supprimez de l'endroit où le curseur se place, puis quittez la zone de texte, l'espace réservé approprié apparaît alors.

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

2

Semble bien fonctionner: jsfiddle.net/3BzBk ... Ne placez pas le script à l'extérieur du corps :)

— Marco Johannesen

2

Quel navigateur utilisez-vous? Tous les navigateurs ne prennent pas en charge l'attribut d'espace réservé

— Xharze

Vous pouvez toujours utiliser les événements onfocus et onblur pour obtenir le même effet. En outre, vous pouvez tester si l'espace réservé est pris en charge par le navigateur ou non en utilisant une fonction telle que: function placeholderIsSupported () {test = document.createElement ('input'); return ('espace réservé' dans le test); }

— gentrobot

1

@MarcoJohannesen Merci! Je ne peux pas encore dire exactement ce qui est différent mais cela fonctionne maintenant.

— rojobuffalo

1

@ user1338065 Super. Était-ce parce qu'il était placé à l'extérieur du corps ou?

— Marco Johannesen

671

Celui-ci a toujours été un piège pour moi et beaucoup d'autres. En bref, les balises d'ouverture et de fermeture de l' <textarea>élément doivent être sur la même ligne, sinon un caractère de nouvelle ligne l'occupe. L'espace réservé ne sera donc pas affiché car la zone de saisie contient du contenu (un caractère de nouvelle ligne est, techniquement, un contenu valide).

Bien:

<textarea></textarea>

Mauvais:

<textarea>
</textarea>

Mise à jour (2020)

Ce n'est plus vrai , selon la spécification d'analyse 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.)

Cependant, vous pourriez toujours avoir des problèmes si votre éditeur insiste pour terminer les lignes avec CRLF.

— Aquarelle
source

66

Mec, cette réponse était si simple, je ne croyais pas que c'était vrai! Mais je l'ai testé par moi-même et, bien sûr, les espaces à l'intérieur d'une zone de texte sont considérés comme du contenu - empêchant l'affichage de l'espace réservé.

— Eric L.

Si le plugin a été modifié, vous pouvez résoudre ce problème en utilisant la .trimméthode de jQuery .

— SpYk3HH

Un exemple serait d'ajouter simplement un morceau à JS (avant ou après l'appel du plugin, peu importe) qui ressemble à ce qui suit:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

De plus, lors de la création d'un nouvel élément textarea après le chargement du DOM, veillez à inclure la balise de fermeture />au lieu de >. Exemple:$('body').html('<textarea placeholder="test" />');

— dégénéré le

s'il y a un espace à l'intérieur du, <textarea>cela signifie que la zone de texte n'est pas vide, donc, il n'y a pas d'utilisation d'un espace réservé. :)

— Edu Ruiz

43

Supprimez tous les espaces et sauts de ligne entre <textarea>les </textarea>balises d' ouverture et de fermeture .

<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

— Développeur principal
source

L'espace le tue? Bizarre.

— AndrewLeonardi

2

Il traite l'espace comme une valeur.

— Développeur principal

9

c'est parce qu'il y a un espace quelque part. J'utilisais jsfiddle et il y avait un espace après la balise. Après avoir supprimé l'espace, il a commencé à fonctionner

— Matthieu
source

Hou la la! J'avais la balise de fermeture textarea sur la ligne suivante, en retrait de 4 espaces> ces espaces invisibles sont dans la zone de texte, mais je ne m'en suis pas rendu compte avant d'essayer d'utiliser un espace réservé. Aucun espace entre les balises textarea d'ouverture et de fermeture!

— DOK le

5

Eh bien, techniquement, il ne doit pas être sur la même ligne tant qu'il n'y a pas de caractère entre la fin ">" de la balise de début et le début "<" de la balise de fermeture. C'est que vous devez terminer avec ...></textarea>comme dans l'exemple ci-dessous:

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

— Conny P
source

3

Je sais que Aquarelle a (très bien) répondu à cet article, mais juste au cas où quelqu'un aurait ce problème avec d'autres formulaires de balises sans texte comme des entrées, je laisserai ceci ici:

Si vous avez une entrée dans votre formulaire et que l'espace réservé ne s'affiche pas en raison d'un espace blanc au début, cela peut être dû à votre attribut «valeur». Si vous utilisez des variables pour remplir la valeur d'une entrée, vérifiez qu'il n'y a pas d'espaces blancs entre les virgules et les variables.

exemple utilisant twig pour le framework php 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

Dans ce cas, la balise entre {{}} est la variable, assurez-vous simplement de ne pas laisser d'espaces entre les virgules car l'espace blanc est également un caractère valide.

— ÉpicéTacos23
source

2

utiliser <textarea></textarea>au lieu de laisser un espace entre les balises d'ouverture et de fermeture comme<textarea> </textarea>

— Encore
source

4

Cela n'ajoute rien que les réponses existantes ne traitent pas déjà.

— Tous les travailleurs sont essentiels

0

Entre la balise d'ouverture et de fermeture dans notre cas, la balise textarea ne doit pas être un espace ou un caractère de nouvelle ligne ou un texte (valeur).

S'il y a un espace, un caractère de nouvelle ligne ou tout autre texte, il est considéré comme une valeur qui remplace l'espace réservé.

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

0

J'ai eu le même problème, en utilisant uniquement un .pugfichier (similaire à .jade). J'ai réalisé que c'était aussi un problème d'espace , après la fin de mes parenthèses fermantes. Dans mon exemple, vous devez mettre en évidence le texte après (placeholder="YOUR MESSAGE")pour voir:

AVANT:

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

APRÈS:

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

— maudulus
source

-1

Alors, la question est maintenant de savoir comment préremplir l'élément textarea? XYZ, vous obtiendrez:

Le problème principal est que dans l'élément textarea, nous préremplissons involontairement l'élément par un espace blanc.

— Hani
source