Warum wird der Platzhalter meines Textbereichs nicht angezeigt?

74

Ich verwende Platzhalter für alle meine Formularelemente und sie werden in allen außer dem Textbereich angezeigt. Ich habe es mir gerade auf einer Safari angesehen und festgestellt, dass meine Eingabe von type = "number" auch den Platzhalter nicht anzeigt.

Die Seite ist hier und Sie müssen oben auf der Seite auf den Link "Jetzt buchen" klicken.

Mein HTML:

<form id="booking" action="single-workshops.php">
    <input type="text" required="required" placeholder="name"/><br />
    <input type="text" required="required" placeholder="your phone number"/><br />
    <input type="email" required="required" placeholder="email"/><br />
    <input type="number" required="required" placeholder="how many in your party" /><br />
    <textarea rows="5" cols="30" placeholder="enter optional message">
    </textarea><br />
    <input type="button" value="submit"/>
</form>
Claire
quelle

Antworten:

191

Weil Sie etwas als Text in Ihrem Textbereich mit einem Zeilenumbruch haben.

<textarea rows="5" cols="30" placeholder="enter optional message">
        </textarea><br />

Sollte sein:

<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />
PeeHaa
quelle
2
Schöner Fang! Daran hätte ich nie gedacht, ich bin tatsächlich überrascht, dass es in anderen Browsern funktioniert, wenn man bedenkt, dass es technisch gesehen Inhalte gibt. Durch Hinzufügen eines zweiten Zeilenumbruchs wird der Platzhalter in Firefox entfernt.
Wesley Murch
In anderen Browsern funktioniert es nicht. Die Nummer eins in Chrom, nicht in Safari. Ich suche nur nach einer Lösung.
Claire
@Nicola: Hat das das Problem behoben? Ich habe Safari nicht installiert.
Wesley Murch
1
@WesleyMurch Entschuldigung, ich meinte, dass es für Textbereich funktioniert, wenn ich den Zeilenumbruch entferne. Was immer noch nicht funktioniert, ist der Platzhalter input type = "number".
Claire
@peeHaa: Funktioniert in Safari nicht richtig, wenn Platzhalterinhaltsgröße lang ist. try placeholder = "Optionale Nachricht mit großen Daten eingeben", Platzhalter zeigt nur "Optionale Nachricht eingeben" an. Andere sind ausgeblendet wie Textüberlauf als Chrom?
Jay Bhalodi