Teks HTML5 adalah placeholder tidak muncul

183

Saya tidak dapat menemukan apa yang salah dengan markup saya, tetapi pengganti untuk area teks tidak akan muncul. Sepertinya itu mungkin ditutupi dengan beberapa ruang dan tab kosong. Saat Anda fokus pada area teks dan menghapus dari tempat kursor menempatkan dirinya, lalu meninggalkan area teks, placeholder yang tepat kemudian muncul.

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

jquery forms html textarea placeholder rojobuffalo
sumber

2

Tampaknya bekerja dengan baik: jsfiddle.net/3BzBk ... Jangan letakkan skrip di luar tubuh :)

Marco Johannesen

2

browser mana yang kamu gunakan? Tidak semua browser mendukung atribut placeholder

Xharze

Anda selalu dapat menggunakan onfocus dan onblur events untuk mendapatkan efek yang sama. Anda juga dapat menguji apakah placeholder didukung oleh browser atau tidak dengan menggunakan fungsi seperti: function placeholderIsSupported () {test = document.createElement ('input'); return ('placeholder' dalam ujian); }

gentrobot

1

@MarcoJohannesen Terima kasih! Saya belum dapat mengatakan dengan tepat apa yang berbeda tetapi berfungsi sekarang.

rojobuffalo

1

@ user1338065 Super. Apakah karena ditempatkan di luar tubuh atau?

Marco Johannesen

670

Yang ini selalu menjadi gotcha bagi saya dan banyak lainnya. Singkatnya, tag pembuka dan penutup untuk <textarea>elemen harus berada di baris yang sama, jika tidak, karakter baris baru akan memenuhinya. Oleh karena itu placeholder tidak akan ditampilkan karena area input berisi konten (karakter baris baru, secara teknis, konten yang valid).

Baik:

<textarea></textarea>

Buruk:

<textarea>
</textarea>

Pembaruan (2020)

Ini tidak benar lagi, menurut spesifikasi parsing 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.)

Anda mungkin masih mengalami kesulitan jika editor bersikeras untuk mengakhiri kalimat dengan CRLF.

Akuarel
sumber

66

Sobat, jawaban ini sangat mudah, saya tidak percaya itu benar! Tapi saya mengujinya sendiri dan, tentu saja, spasi putih di dalam textarea dianggap konten - mencegah placeholder dari ditampilkan.

Eric L.

Jika plugin telah diedit, Anda dapat memperbaiki masalah ini menggunakan .trimmetode jQuery .

SpYk3HH

Sebuah contoh, adalah dengan menambahkan sepotong ke JS (sebelum atau setelah panggilan plugin, tidak masalah) yang terlihat seperti berikut:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

SpYk3HH

Juga, saat membuat elemen textarea baru setelah DOM dimuat, pastikan untuk menyertakan tag penutup />sebagai ganti >. Contoh:$('body').html('<textarea placeholder="test" />');

merosot

jika ada spasi putih di <textarea>dalamnya berarti textarea tidak kosong, jadi, tidak ada gunanya bagi placeholder. :)

Edu Ruiz

42

Hapus semua spasi dan jeda baris antara tag <textarea>pembuka dan penutup </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

Pengembang Pimpinan
sumber

Ruang membunuhnya? Aneh.

AndrewLeonardi

2

Ini memperlakukan ruang sebagai nilai.

Pengembang

9

itu karena ada ruang di suatu tempat. Saya menggunakan jsfiddle dan ada spasi setelah tag. Setelah saya menghapus ruang itu mulai berfungsi

matthew
sumber

Wow! Saya memiliki tag textarea penutup di baris berikutnya, menjorok 4 spasi> spasi tak terlihat itu di textarea, tetapi saya tidak menyadari bahwa sampai saya mencoba menggunakan placeholder. Tidak ada spasi antara tag teks pembuka dan penutup!

DOK

5

Yah, secara teknis tidak harus berada pada baris yang sama selama tidak ada karakter antara akhir ">" dari tag awal dan awal "<" dari tag penutup. Itulah yang harus Anda akhiri dengan ...></textarea>seperti pada contoh di bawah ini:

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

Conny P
sumber

3

Saya tahu posting ini telah (sangat baik) dijawab oleh Aquarelle tetapi kalau-kalau ada orang yang mengalami masalah ini dengan bentuk tag lain tanpa teks seperti input saya akan meninggalkan ini di sini:

Jika Anda memiliki input di formulir dan placeholder tidak muncul karena spasi putih di awal, ini mungkin disebabkan oleh atribut "nilai" Anda. Jika Anda menggunakan variabel untuk mengisi nilai input, periksa bahwa tidak ada spasi putih antara koma dan variabel.

contoh menggunakan ranting untuk symfony framework 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

Dalam hal ini tag antara {{}} adalah variabel, pastikan Anda tidak meninggalkan spasi di antara koma karena spasi putih juga merupakan karakter yang valid.

SpicyTacos23
sumber

2

gunakan <textarea></textarea>alih-alih menyisakan ruang antara tag pembuka dan penutup sebagai<textarea> </textarea>

Namun
sumber

4

Ini tidak menambahkan apa pun yang jawaban yang sudah ada tidak membahas.

Semua Pekerja Penting

0

Antara tag pembuka dan penutup dalam tag textarea kasus kami tidak boleh spasi atau karakter baris baru atau teks apa pun (nilai).

Jika ada spasi, karakter baris baru atau teks apa pun, itu dianggap sebagai nilai yang menimpa placeholder.

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

0

Saya memiliki masalah yang sama, hanya menggunakan .pugfile (mirip dengan .jade). Saya menyadari bahwa itu juga masalah ruang angkasa , mengikuti akhir kurung penutup saya. Dalam contoh saya, Anda perlu menyorot teks setelahnya (placeholder="YOUR MESSAGE")untuk melihat:

SEBELUM:

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

SETELAH:

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

maudulus
sumber

-1

Jadi, pertanyaannya sekarang adalah bagaimana kita memilih elemen textarea? XYZ, Anda akan mendapatkan:

Masalah utama adalah bahwa dalam elemen textarea kita secara tidak sengaja memilih elemen dengan spasi.

Hani
sumber

Teks HTML5 adalah placeholder tidak muncul

Jawaban:

Pembaruan (2020)