web-dev-qa-db-fra.com

Espace réservé HTML5 textarea n'apparaissant pas

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 que certains espaces et onglets soient recouverts. Lorsque vous vous concentrez sur la zone de texte et supprimez l'endroit où le curseur s'est placé, 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>
jqueryformshtml5textareaplaceholder
141
rojobuffalo

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’élément <textarea> doivent se trouver 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>

Mal:

<textarea>
</textarea>
525
Aquarelle

Supprimer tous les espaces et les sauts de ligne entre les balises <textarea> d'ouverture et de fermeture </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
34
Mahendra Jella

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

9
matthew

Eh bien, techniquement, il n'est pas nécessaire qu'il se trouve sur la même ligne tant qu'il n'y a pas de caractère entre le ">" de fin de la balise de début et le "<" de début de la balise de fermeture. C'est-à-dire que vous devez terminer par ...></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>
4
Conny P

utilisez <textarea></textarea> au lieu de laisser un espace entre les balises d'ouverture et de fermeture sous la forme <textarea> </textarea>

2
Yet

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

Si vous avez une entrée dans votre formulaire et que le paramètre fictif ne s'affiche pas car un espace blanc au début, cela peut être causé par l'attribut "valeur". Si vous utilisez des variables pour renseigner la valeur d'une entrée, vérifiez qu'il n'y a pas d'espaces entre les virgules et les variables. 

exemple d'utilisation de 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 les espaces sont également des caractères valides. 

2
SpicyTacos23

Entre les balises ouvrante et fermante dans notre cas, la balise textarea ne doit pas être espace ou caractère de nouvelle ligne ni aucun texte (valeur).

S'il y a de l'espace, un caractère de nouvelle ligne ou un texte, c'est considéré comme une valeur qui remplace le paramètre fictif.

    **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>
0
Yergalem

J'ai eu le même problème, en utilisant uniquement un fichier .pug (similaire à .jade). J'ai réalisé que c'était aussi un problème d'espace, à la suite de la fin de mes parenthèses finales. Dans mon exemple, vous devez surligner 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
0
maudulus