it-swarm.com.de

Platzhalter für HTML5-Textbereiche wird nicht angezeigt

Ich kann nicht herausfinden, was mit meiner Markierung falsch ist, aber der Platzhalter für den Textbereich wird nicht angezeigt. Es scheint, als wäre es mit einigen Leerzeichen und Registerkarten verdeckt. Wenn Sie sich auf den Textbereich konzentrieren und aus der Position des Cursors löschen und den Textbereich verlassen, wird der richtige Platzhalter angezeigt.

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

Dieses war schon immer ein Problem für mich und viele andere. Kurz gesagt, die öffnenden und schließenden Tags für das <textarea>-Element müssen sich in derselben Zeile befinden, anderenfalls wird sie durch ein Zeilenvorschubzeichen belegt. Der Platzhalter wird daher nicht angezeigt, da der Eingabebereich Inhalt enthält (ein Zeilenvorschubzeichen ist technisch gesehen gültiger Inhalt).

Gut:

<textarea></textarea>

Schlecht:

<textarea>
</textarea>
525
Aquarelle

Lösche alle Leerzeichen und Zeilenumbrüche zwischen <textarea>-öffnenden und schließenden </textarea>-Tags.  

<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

sein, weil es irgendwo einen Raum gibt. Ich habe jsfiddle benutzt und es gab ein Leerzeichen nach dem Tag. Nachdem ich den Platz gelöscht hatte, begann er zu arbeiten

9
matthew

Nun, technisch muss es sich nicht in derselben Zeile befinden, solange sich kein Zeichen zwischen dem Endzeichen ">" vom Starttag und dem Startzeichen "<" des schließenden Tags befindet. Das heißt, Sie müssen mit ...></textarea> wie im folgenden Beispiel enden:

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

verwenden Sie <textarea></textarea>, anstatt ein Leerzeichen zwischen öffnendem und schließendem Tag als <textarea> </textarea> zu lassen.

2
Yet

Ich weiß, dass dieser Beitrag von Aquarelle (sehr gut) beantwortet wurde, aber für den Fall, dass jemand dieses Problem mit anderen Tag-Formularen ohne Text wie Eingaben hat, lasse ich das hier:

Wenn sich in Ihrem Formular eine Eingabe befindet und der Platzhalter nicht angezeigt wird, weil zu Beginn ein Leerzeichen angezeigt wird, kann dies für Ihr "value" -Attribut verantwortlich sein. Falls Sie den Wert einer Eingabe mit Variablen füllen, überprüfen Sie, ob zwischen den Kommas und den Variablen keine Leerzeichen stehen. 

beispiel mit twig für 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 diesem Fall ist das Tag zwischen {{}} die Variable. Stellen Sie nur sicher, dass Sie keine Leerzeichen zwischen den Kommas lassen, da Leerzeichen ebenfalls ein gültiges Zeichen sind. 

2
SpicyTacos23

Zwischen dem öffnenden und dem schließenden Tag in unserem Fall sollte das textarea-Tag kein Leerzeichen oder Newline-Zeichen oder irgendein Text (Wert) sein.

Wenn Leerzeichen, Zeilenumbrüche oder Text vorhanden sind, wird dies als Wert betrachtet, der Platzhalter überschreibt.

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

Ich hatte das gleiche Problem, nur mit einer .pug-Datei (ähnlich wie .jade). Ich bemerkte, dass es sich auch um ein space-Problem handelte am Ende meiner schließenden Klammern. In meinem Beispiel müssen Sie den Text nach (placeholder="YOUR MESSAGE") markieren, um Folgendes anzuzeigen: 

VOR:

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

NACH DEM:

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