Ich kann nicht herausfinden, was mit meinem Markup nicht stimmt, aber der Platzhalter für den Textbereich wird nicht angezeigt. Es scheint, als ob es mit einigen Leerzeichen und Tabulatoren verdeckt sein könnte. Wenn Sie sich auf den Textbereich konzentrieren und dort löschen, wo sich der Cursor befindet, und dann 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>
Antworten:
Dieser war schon immer ein Gotcha 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, andernfalls wird sie von einem Zeilenumbruchzeichen belegt. Der Platzhalter wird daher nicht angezeigt, da der Eingabebereich Inhalt enthält (ein Zeilenumbruchzeichen ist technisch gesehen ein gültiger Inhalt).Gut:
Schlecht:
Update (2020)
Dies gilt laut HTML5-Parsing-Spezifikation nicht mehr:
Möglicherweise haben Sie dennoch Probleme, wenn Ihr Editor darauf besteht, Zeilen mit CRLF zu beenden.
quelle
.trimMethode von jQuery beheben .$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });/>stattdessen das schließende Tag anstelle von einschließen>. Beispiel:$('body').html('<textarea placeholder="test" />');<textarea>Textbereichs ein Leerzeichen befindet , bedeutet dies, dass der Textbereich nicht leer ist. Daher kann ein Platzhalter nicht verwendet werden. :)Löschen Sie alle Leerzeichen und Zeilenumbrüche zwischen dem
<textarea>Öffnen und Schließen von</textarea>Tags.quelle
Es liegt daran, dass irgendwo ein Platz ist. Ich habe jsfiddle verwendet und nach dem Tag war ein Leerzeichen. Nachdem ich den Speicherplatz gelöscht hatte, fing es an zu funktionieren
quelle
Technisch gesehen muss es nicht in derselben Zeile stehen, solange zwischen dem Ende ">" vom Start-Tag und dem Start "<" vom Schluss-Tag kein Zeichen steht. Damit müssen Sie
...></textarea>wie im folgenden Beispiel enden :quelle
Ich weiß, dass dieser Beitrag (sehr gut) von Aquarelle beantwortet wurde, aber nur für den Fall, dass jemand dieses Problem mit anderen Tag-Formularen ohne Text wie Eingaben hat, lasse ich dies hier:
Wenn Sie eine Eingabe in Ihrem Formular haben und der Platzhalter nicht angezeigt wird, weil am Anfang ein Leerzeichen steht, kann dies für Ihr Attribut "Wert" verursacht werden. Wenn Sie Variablen verwenden, um den Wert einer Eingabe zu füllen, überprüfen Sie, ob zwischen den Kommas und den Variablen keine Leerzeichen vorhanden sind.
Beispiel mit Twig für PHP Framework Symfony:
In diesem Fall ist das Tag zwischen {{}} die Variable. Stellen Sie nur sicher, dass zwischen den Kommas keine Leerzeichen stehen, da Leerzeichen ebenfalls ein gültiges Zeichen sind.
quelle
Verwenden Sie,
<textarea></textarea>anstatt ein Leerzeichen zwischen dem öffnenden und dem schließenden Tag als zu lassen<textarea> </textarea>quelle
Zwischen dem Öffnen und Schließen - Tag in unserem Fall TextArea- Tag soll nicht seinen Raum oder Newline - Zeichen oder einen beliebigen Text (Wert).
Wenn Leerzeichen, Zeilenumbrüche oder Text vorhanden sind, wird dies als Wert betrachtet, der den Platzhalter überschreibt.
quelle
Ich hatte das gleiche Problem, nur mit einer
.pugDatei (ähnlich wie.jade). Nach dem Ende meiner schließenden Klammern wurde mir klar, dass es sich auch um ein Platzproblem handelte . In meinem Beispiel müssen Sie den Text danach hervorheben(placeholder="YOUR MESSAGE")zu sehen:VOR:
NACH DEM:
quelle