Platzhalter für HTML5-Textbereich wird nicht angezeigt

181

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>

— Rojobuffalo
quelle

2

Scheint gut zu funktionieren: jsfiddle.net/3BzBk ... Platzieren Sie das Skript nicht außerhalb des Körpers :)

— Marco Johannesen

2

Welchen Browser verwenden Sie? Nicht alle Browser unterstützen das Platzhalterattribut

— Xharze

Sie können immer die Ereignisse onfocus und onblur verwenden, um den gleichen Effekt zu erzielen. Sie können auch testen, ob Platzhalter vom Browser unterstützt werden oder nicht, indem Sie eine Funktion wie die folgende verwenden: function placeholderIsSupported () {test = document.createElement ('input'); return ('Platzhalter' im Test); }

— Gentrobot

1

@MarcoJohannesen Danke! Ich kann noch nicht genau sagen, was anders ist, aber es funktioniert jetzt.

— Rojobuffalo

1

@ user1338065 Super. War es, weil es außerhalb des Körpers platziert wurde oder?

— Marco Johannesen

661

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:

<textarea></textarea>

Schlecht:

<textarea>
</textarea>

Update (2020)

Dies gilt laut HTML5-Parsing-Spezifikation nicht mehr:

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.)

Möglicherweise haben Sie dennoch Probleme, wenn Ihr Editor darauf besteht, Zeilen mit CRLF zu beenden.

— Aquarelle
quelle

66

Mann, diese Antwort war so einfach, ich habe nicht geglaubt, dass sie wahr ist! Aber ich habe es selbst getestet und Leerzeichen in einem Textbereich werden als Inhalt betrachtet, sodass der Platzhalter nicht angezeigt wird.

— Eric L.

Wenn das Plugin bearbeitet wurde, können Sie dieses Problem mit der .trimMethode von jQuery beheben .

— SpYk3HH

Ein Beispiel wäre, einfach ein Stück zu JS hinzuzufügen (vor oder nach dem Plugin-Aufruf, spielt keine Rolle), das wie folgt aussieht:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

Wenn Sie nach dem Laden des DOM ein neues Textarea-Element erstellen, müssen Sie />stattdessen das schließende Tag anstelle von einschließen >. Beispiel:$('body').html('<textarea placeholder="test" />');

— entartet am

Wenn sich innerhalb des <textarea>Textbereichs ein Leerzeichen befindet , bedeutet dies, dass der Textbereich nicht leer ist. Daher kann ein Platzhalter nicht verwendet werden. :)

— Edu Ruiz

42

Löschen Sie alle Leerzeichen und Zeilenumbrüche zwischen dem <textarea>Öffnen und Schließen von </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

— Leitender Entwickler
quelle

Der Raum tötet es? Seltsam.

— AndrewLeonardi

2

Der Raum wird als Wert behandelt.

— Leitender Entwickler

9

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

— Matthew
quelle

Beeindruckend! Ich hatte das schließende Textbereich-Tag in der nächsten Zeile, 4 Leerzeichen eingerückt> diese unsichtbaren Leerzeichen befinden sich im Textbereich, aber das wurde mir erst klar, als ich versuchte, Platzhalter zu verwenden. Keine Leerzeichen zwischen den öffnenden und schließenden Textbereich-Tags!

— DOK

5

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 :

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

— Conny P.
quelle

3

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:

<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 zwischen den Kommas keine Leerzeichen stehen, da Leerzeichen ebenfalls ein gültiges Zeichen sind.

— SpicyTacos23
quelle

2

Verwenden Sie, <textarea></textarea>anstatt ein Leerzeichen zwischen dem öffnenden und dem schließenden Tag als zu lassen<textarea> </textarea>

— Noch
quelle

4

Dies fügt nichts hinzu, was die vorhandenen Antworten noch nicht ansprechen.

— Alle Arbeiter sind wesentlich

0

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.

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

0

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:

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

— Maudulus
quelle