Symbol zastępczy text5 HTML nie pojawia się

182

Nie mogę ustalić, co jest nie tak z moim znacznikiem, ale symbol zastępczy pola tekstowego nie pojawi się. Wygląda na to, że może być przykryty pustymi spacjami i tabulatorami. Gdy skupisz się na obszarze tekstowym i usuniesz miejsce, w którym znajduje się kursor, a następnie opuścisz obszar tekstowy, pojawi się odpowiedni symbol zastępczy.

<!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
źródło

2

Wygląda na to, że działa dobrze: jsfiddle.net/3BzBk ... Nie umieszczaj skryptu poza ciałem :)

— Marco Johannesen

2

Z jakiej przeglądarki korzystasz? Nie wszystkie przeglądarki obsługują atrybut zastępczy

— Xharze

Zawsze możesz użyć zdarzeń onfocus i onblur, aby uzyskać ten sam efekt. Możesz również sprawdzić, czy symbol zastępczy jest obsługiwany przez przeglądarkę, czy nie, używając funkcji takiej jak: function placeholderIsSupported () {test = document.createElement ('input'); return („symbol zastępczy” w teście); }

— gentrobot,

1

@MarcoJohannesen Dziękujemy! Nie mogę jeszcze powiedzieć dokładnie, co jest inne, ale teraz działa.

— rojobuffalo

1

@ user1338065 Super. Czy to dlatego, że został umieszczony poza ciałem, czy?

— Marco Johannesen,

668

Ten zawsze był gotcha dla mnie i wielu innych. Krótko mówiąc, otwierające i zamykające znaczniki dla <textarea>elementu muszą znajdować się w tym samym wierszu, w przeciwnym razie zajmie go znak nowej linii. Symbol zastępczy nie będzie zatem wyświetlany, ponieważ obszar wprowadzania zawiera treść (znak nowej linii to technicznie poprawna treść).

Dobry:

<textarea></textarea>

Zły:

<textarea>
</textarea>

Aktualizacja (2020)

To już nie jest prawda , zgodnie ze specyfikacją parsowania HTML5:

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

Nadal możesz mieć problemy, jeśli edytor nalega na zakończenie linii za pomocą CRLF.

— Aquarelle
źródło

66

Człowieku, ta odpowiedź była tak prosta, że nie wierzyłem, że to prawda! Ale przetestowałem to dla siebie i, oczywiście, spacja w obszarze tekstowym jest uważana za treść - zapobiegając wyświetlaniu symbolu zastępczego.

— Eric L.

Jeśli wtyczka została edytowana, możesz rozwiązać ten problem za pomocą .trimmetody jQuery .

— SpYk3HH,

Przykładem może być po prostu dodanie do JS elementu (przed lub po wywołaniu wtyczki, nie ma znaczenia), który wygląda następująco:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH 19.09.13

Ponadto, podczas tworzenia nowego elementu textarea po załadowaniu DOM, pamiętaj o dołączeniu tagu zamykającego />zamiast >. Przykład:$('body').html('<textarea placeholder="test" />');

— zdegenerowany

jeśli wewnątrz jest biały znak <textarea>, oznacza to, że obszar tekstowy nie jest pusty, więc nie ma zastosowania dla symbolu zastępczego. :)

— Edu Ruiz,

42

Usuń wszystkie spacje i znaki podziału między znacznikami <textarea>otwierającymi i zamykającymi </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

— Główny programista
źródło

Przestrzeń to zabija? Dziwne.

— AndrewLeonardi,

2

Traktuje przestrzeń jako wartość.

— Główny programista

9

ponieważ jest gdzieś przestrzeń. Używałem jsfiddle, a po tagu była spacja. Po usunięciu miejsca zaczęło działać

— Mateusz
źródło

Łał! Miałem zamykający tag textarea w następnym wierszu, wcięte 4 spacje> te niewidoczne spacje znajdują się w obszarze tekstowym, ale nie zdawałem sobie z tego sprawy, dopóki nie spróbowałem użyć symbolu zastępczego. Brak spacji między otwierającymi i zamykającymi znacznikami textarea!

— DOK

5

Cóż, technicznie rzecz biorąc, nie musi znajdować się w tym samym wierszu, o ile nie ma znaku między końcowym „>” znacznikiem początkowym a początkowym „<” znacznikiem końcowym. Oznacza to, że musisz zakończyć ...></textarea>jak w poniższym przykładzie:

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

— Conny P.
źródło

3

Wiem, że na ten post (bardzo dobrze) odpowiedział Aquarelle, ale na wypadek, gdyby ktoś miał ten problem z innymi formularzami znaczników bez tekstu, takimi jak dane wejściowe, zostawię to tutaj:

Jeśli masz w formularzu dane wejściowe, a symbol zastępczy nie jest wyświetlany, ponieważ na początku występuje biała spacja, może to być spowodowane atrybutem „wartość”. Jeśli używasz zmiennych do wypełnienia wartości wejściowej, sprawdź, czy między przecinkami a zmiennymi nie ma białych znaków.

przykład użycia twig do symfony frameworka PHP:

<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

W tym przypadku tag między {{}} jest zmienną, upewnij się tylko, że nie pozostawiasz spacji między przecinkami, ponieważ biały znak jest również prawidłowym znakiem.

— SpicyTacos23
źródło

2

użyj <textarea></textarea>zamiast zostawiać spację między otwierającym i zamykającym znacznikiem jako<textarea> </textarea>

— Jeszcze
źródło

4

Nie dodaje to niczego, czego dotychczasowe odpowiedzi jeszcze nie dotyczą.

— Wszyscy pracownicy są niezbędni

0

Między otworem a tagiem zamykającym w naszym tagu textarea sprawa nie powinna być spacja lub znak nowej linii lub dowolny tekst (wartość).

Jeśli jest spacja, znak nowej linii lub dowolny tekst, jest to uważane za wartość, która zastępuje symbol zastępczy.

    **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
źródło

0

Miałem ten sam problem, używając tylko .pugpliku (podobnego do .jade). Po zakończeniu moich nawiasów zamykających zdałem sobie sprawę, że jest to również kwestia miejsca . W moim przykładzie musisz zaznaczyć tekst po, (placeholder="YOUR MESSAGE")aby zobaczyć:

PRZED:

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

PO:

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

— maudulus
źródło

-1

Pytanie brzmi więc, jak wstępnie wypełnić element textarea? XYZ, otrzymasz:

Główny problem polega na tym, że w elemencie textarea mimowolnie wypełniamy go spacją.

— Hani
źródło