HTML5 metin alanı yer tutucusu görünmüyor

183

İşaretlememde neyin yanlış olduğunu anlayamıyorum, ancak metin alanı için yer tutucu görünmeyecek. Bazı boşluklar ve sekmelerle örtülmüş gibi görünüyor. Metin alanına odaklanıp imlecin kendisini koyduğu yerden sildiğinizde, metin alanını terk ettiğinizde, uygun yer tutucu görünür.

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

2

İyi çalışıyor gibi görünüyor: jsfiddle.net/3BzBk ... Senaryoyu vücudun dışına yerleştirmeyin :)

— Marco Johannesen

2

Hangi tarayıcıyı kullanıyorsunuz? Tüm tarayıcılar yer tutucu özelliğini desteklemez

— Xharze

Aynı etkiyi elde etmek için her zaman onfocus ve onblur olaylarını kullanabilirsiniz. Ayrıca, yer tutucunun tarayıcı tarafından desteklenip desteklenmediğini aşağıdaki gibi bir işlev kullanarak test edebilirsiniz: function placeholderIsSupported () {test = document.createElement ('input'); dönüş (testte 'yer tutucu'); }

— gentrobot

1

@MarcoJohannesen Teşekkürler! Tam olarak neyin farklı olduğunu tam olarak söyleyemem ama şimdi çalışıyor.

— rojobuffalo

1

@ user1338065 Süper. Çünkü vücudun dışına mı yerleştirilmişti?

— Marco Johannesen

671

Bu benim ve diğerleri için hep bir yakaladım. Kısacası, <textarea>öğenin açılış ve kapanış etiketleri aynı satırda olmalıdır, aksi takdirde yeni satır karakteri onu kaplar. Dolayısıyla, giriş alanı içerik içerdiğinden (yeni satır karakteri teknik olarak geçerli içeriktir) yer tutucu görüntülenmez.

İyi:

<textarea></textarea>

Kötü:

<textarea>
</textarea>

Güncelleme (2020)

Bu doğru değil teknik özelliklerini çözümlerken HTML5 göre, artık:

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

Düzenleyiciniz CRLF ile satır sonlarında ısrar ediyorsanız yine de sorun yaşayabilirsiniz.

— suluboya
kaynak

66

Dostum, bu cevap çok açıktı, doğru olduğuna inanmadım! Ancak bunu kendim için test ettim ve yeterince, bir metin alanının içindeki boşluk, içerik olarak kabul edildi - yer tutucunun görüntülenmesini engelledi.

— Eric L.

Eklenti düzenlenmişse, jQuery'nin .trimyöntemini kullanarak bu sorunu çözebilirsiniz .

— SpYk3HH

Bir örnek, $('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— JS'ye

Ayrıca, DOM yüklendikten sonra yeni bir textarea öğesi oluştururken, />yerine kapatma etiketini eklediğinizden emin olun >. Örnek:$('body').html('<textarea placeholder="test" />');

— dejenere

içinde bir boşluk varsa <textarea>, metin alanının boş olmadığı anlamına gelir, bu nedenle yer tutucunun bir faydası yoktur. :)

— Edu Ruiz

43

Etiketleri <textarea>açma ve kapatma arasındaki tüm boşlukları ve satır sonlarını silin </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

— Baş Geliştirici
kaynak

Uzay onu öldürüyor mu? Tuhaf.

— AndrewLeonardi

2

Alanı bir değer olarak görür.

— Baş Geliştirici

9

çünkü bir yerlerde boşluk var. Ben jsfiddle kullanıyordum ve etiketten sonra bir boşluk vardı. Alanı sildikten sonra çalışmaya başladı

— matthew
kaynak

Vaov! Bir sonraki satırda kapanış textarea etiketi vardı, 4 boşluk girintili> bu görünmez alanlar textarea'da, ancak yer tutucuyu kullanmaya çalışana kadar bunu fark etmedim. Açılış ve kapanış textarea etiketleri arasında boşluk yok!

— DOK

5

Peki, teknik olarak başlangıç etiketinden ">" bitişiyle kapanış etiketinden başlayan "<" arasında hiçbir karakter olmadığı sürece aynı satırda olması gerekmez. Bu, ...></textarea>aşağıdaki örnekte olduğu gibi bitmeniz gerekir:

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

— Conny P
kaynak

3

Bu yazının Aquarelle tarafından (çok iyi) cevaplandığını biliyorum, ancak birisinin girişler gibi metin içermeyen diğer etiket formlarıyla bu sorunu yaşıyor olması durumunda, bunu burada bırakacağım:

Formunuzda bir girdiniz varsa ve yer tutucunuz başlangıçta boşluk olması nedeniyle gösterilmiyorsa, bunun nedeni "değer" özelliğiniz olabilir. Bir girdinin değerini doldurmak için değişkenler kullanıyorsanız, virgül ve değişkenler arasında boşluk olmadığından emin olun.

php framework symfony için twig kullanan örnek:

<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

Bu durumda, {{}} arasındaki etiket değişkendir, beyaz boşluk da geçerli bir karakter olduğundan virgül arasında boşluk bırakmadığınızdan emin olun.

— SpicyTacos23
kaynak

2

kullanmak <textarea></textarea>yerine gibi etiketleri açılması arasında bir boşluk bırakarak ve kapatma<textarea> </textarea>

— Hala
kaynak

4

Bu, mevcut cevapların zaten ele almadığı hiçbir şey eklemez.

— Tüm İşçiler

0

Bizim durumumuzda açılış ve kapanış etiketi arasında textarea etiketi boşluk veya yeni satır karakteri veya herhangi bir metin (değer) olmamalıdır .

Boşluk, yeni satır karakteri veya herhangi bir metin varsa, yer tutucuyu geçersiz kılan değer olarak kabul edilir.

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

0

Ben sadece bir .pugdosya (benzer .jade) kullanarak aynı sorunu vardı . Kapanış parantezimin bitiminden sonra bunun bir uzay sorunu olduğunu fark ettim . Örneğimde, (placeholder="YOUR MESSAGE")görmek için sonraki metni vurgulamanız gerekiyor :

ÖNCE:

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

SONRA:

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

— maudulus
kaynak

-1

Şimdi soru şu: textarea elementini nasıl dolduruyoruz? XYZ, şunları alacaksınız:

Ana sorun, textarea öğesinde, öğeyi istemeden boşlukla doldurmamızdır.

— Hani
kaynak