HTML5 textarea placeholder ไม่ปรากฏขึ้น

183

ฉันไม่สามารถทราบได้ว่าเกิดอะไรขึ้นกับมาร์กอัปของฉัน แต่ตัวยึดสำหรับพื้นที่ข้อความจะไม่ปรากฏ ดูเหมือนว่ามันอาจถูกคลุมไว้ด้วยช่องว่างและแท็บบางส่วน เมื่อคุณมุ่งเน้นที่พื้นที่ข้อความและลบตำแหน่งที่เคอร์เซอร์วางไว้จากนั้นออกจากพื้นที่ข้อความตัวยึดตำแหน่งที่เหมาะสมจะปรากฏขึ้น

<!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
แหล่งที่มา

2

ดูเหมือนว่าจะปรับการทำงาน: jsfiddle.net/3BzBk ... อย่าวางสคริปต์นอกร่างกาย :)

— มาร์โคโยฮันเน

2

คุณใช้เบราว์เซอร์ใดอยู่ เบราว์เซอร์บางตัวเท่านั้นที่สนับสนุนแอตทริบิวต์ตัวยึดตำแหน่ง

— Xharze

คุณสามารถใช้เหตุการณ์ onfocus และ onblur เพื่อให้ได้ผลเดียวกัน นอกจากนี้คุณสามารถทดสอบว่าตัวยึดตำแหน่งได้รับการสนับสนุนโดยเบราว์เซอร์หรือไม่โดยใช้ฟังก์ชันเช่น: function placeholderIsSupported () {test = document.createElement ('input'); return ('ตัวแทน' ในการทดสอบ); }

— gentrobot

1

@MarcoJohannesen ขอขอบคุณ! ฉันยังไม่สามารถบอกได้อย่างชัดเจนว่าอะไรแตกต่างกัน แต่ใช้งานได้ในขณะนี้

— rojobuffalo

1

@ user1338065 สุดยอด เป็นเพราะมันถูกวางไว้นอกร่างกายหรือ?

— Marco Johannesen

671

อันนี้เป็น gotcha สำหรับฉันและคนอื่น ๆ เสมอ กล่าวโดยย่อแท็กเปิดและปิดสำหรับ<textarea>องค์ประกอบจะต้องอยู่ในบรรทัดเดียวกันมิฉะนั้นอักขระขึ้นบรรทัดใหม่จะใช้งาน ตัวยึดจะไม่ปรากฏเนื่องจากพื้นที่อินพุตมีเนื้อหา (อักขระขึ้นบรรทัดใหม่คือเนื้อหาทางเทคนิคที่ถูกต้อง)

ดี:

<textarea></textarea>

แย่:

<textarea>
</textarea>

อัปเดต (2020)

สิ่งนี้ไม่เป็นความจริงอีกต่อไปตามข้อมูลจำเพาะการแยกวิเคราะห์ 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.)

คุณอาจยังคงมีปัญหาหากผู้แก้ไขยืนยันว่าจะลงท้ายด้วย CRLF

— Aquarelle
แหล่งที่มา

66

มนุษย์คำตอบนี้ตรงไปตรงมามากฉันไม่เชื่อว่ามันจะเป็นจริง! แต่ฉันทดสอบด้วยตัวเองและแน่นอนว่าช่องว่างภายใน textarea นั้นถือว่าเป็นเนื้อหา - ป้องกันตัวยึดตำแหน่งไม่ให้ปรากฏ

— Eric L.

หากแก้ไขปลั๊กอินแล้วคุณสามารถแก้ไขปัญหานี้ได้โดยใช้.trimวิธีการของ jQuery

— SpYk3HH

ตัวอย่างจะเป็นการเพิ่มชิ้นส่วนลงใน JS (ก่อนหรือหลังการเรียกใช้ปลั๊กอินไม่สำคัญ) ที่มีลักษณะดังต่อไปนี้:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

นอกจากนี้เมื่อมีการสร้างองค์ประกอบ textarea ใหม่หลังจากที่ DOM ที่จะโหลดให้แน่ใจว่าจะรวมถึงแท็กปิดแทน/> >ตัวอย่าง:$('body').html('<textarea placeholder="test" />');

— เลวลง

หากมีช่องว่างอยู่ข้างใน<textarea>นั่นหมายความว่า textarea ไม่ว่างดังนั้นไม่มีประโยชน์สำหรับตัวยึดตำแหน่ง :)

— Edu Ruiz

43

ลบช่องว่างและตัวแบ่งบรรทัดทั้งหมดระหว่างแท็ก<textarea>เปิดและปิด</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

— นักพัฒนาตะกั่ว
แหล่งที่มา

อวกาศฆ่ามัน แปลก.

— AndrewLeonardi

2

มันถือว่าพื้นที่เป็นค่า

— นักพัฒนาตะกั่ว

9

มันเป็นเพราะมีพื้นที่บางแห่ง ฉันใช้ jsfiddle และมีช่องว่างหลังแท็ก หลังจากฉันลบพื้นที่มันก็เริ่มทำงาน

— แมทธิว
แหล่งที่มา

ว้าว! ฉันมีแท็ก textarea ปิดในบรรทัดถัดไปเยื้อง 4 ช่องว่าง> ช่องว่างที่มองไม่เห็นเหล่านั้นอยู่ใน textarea แต่ฉันไม่ทราบว่าจนกว่าฉันจะลองใช้ตัวยึดตำแหน่ง ไม่มีช่องว่างระหว่างการเปิดและปิดแท็ก textarea!

— DOK

5

ในทางเทคนิคแล้วมันไม่จำเป็นต้องอยู่บนบรรทัดเดียวกันตราบใดที่ไม่มีอักขระระหว่างตอนจบ ">" จากแท็กเริ่มต้นและ "<" เริ่มต้นจากแท็กปิด นั่นคือคุณต้องจบด้วย ...></textarea>ดังตัวอย่างด้านล่าง:

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

— P. Conny P
แหล่งที่มา

3

ฉันรู้ว่าโพสต์นี้ได้รับ (ดีมาก) ตอบโดย Aquarelle แต่ในกรณีที่ใครบางคนกำลังมีปัญหากับรูปแบบแท็กอื่น ๆ ที่ไม่มีข้อความเช่นอินพุตฉันจะออกจากที่นี่:

หากคุณมีการป้อนข้อมูลในแบบฟอร์มและตัวยึดตำแหน่งของคุณไม่แสดงเนื่องจากพื้นที่สีขาวที่จุดเริ่มต้นสิ่งนี้อาจเกิดจากแอตทริบิวต์ "value" ของคุณ ในกรณีที่คุณกำลังใช้ตัวแปรเพื่อเติมค่าของการตรวจสอบอินพุตว่าไม่มีช่องว่างสีขาวระหว่างเครื่องหมายจุลภาคและตัวแปร

ตัวอย่างการใช้กิ่งไม้สำหรับ 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

ในกรณีนี้แท็กระหว่าง {{}} เป็นตัวแปรเพียงตรวจสอบให้แน่ใจว่าคุณไม่ได้เว้นช่องว่างระหว่างเครื่องหมายจุลภาคเนื่องจากช่องว่างสีขาวเป็นอักขระที่ถูกต้องเช่นกัน

— SpicyTacos23
แหล่งที่มา

2

ใช้<textarea></textarea>แทนการเว้นช่องว่างระหว่างแท็กเปิดและแท็กปิดเป็น<textarea> </textarea>

— ยัง
แหล่งที่มา

4

นี่เป็นการเพิ่มอะไรที่คำตอบที่มีอยู่ยังไม่ได้ตอบ

— คนงานทุกคนมีความจำเป็น

0

ระหว่างแท็กเปิดและปิดในแท็ก textarea ของเราไม่ควรมีช่องว่างหรืออักขระขึ้นบรรทัดใหม่หรือข้อความใด ๆ (ค่า)

หากมีช่องว่างอักขระขึ้นบรรทัดใหม่หรือข้อความใด ๆ ถือว่าเป็นค่าที่แทนที่ตัวยึดตำแหน่ง

    **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
แหล่งที่มา

0

ฉันมีปัญหาเดียวกันโดยใช้.pugไฟล์ (คล้ายกับ.jade) ฉันรู้ว่านี่เป็นปัญหาด้านอวกาศหลังจากสิ้นสุดวงเล็บปิดแล้ว ในตัวอย่างของฉันคุณต้องเน้นข้อความหลังจาก(placeholder="YOUR MESSAGE")ที่เห็น:

ก่อน:

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

หลังจาก:

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

— maudulus
แหล่งที่มา

-1

ดังนั้นคำถามตอนนี้เราจะเติมองค์ประกอบข้อความล่วงหน้าได้อย่างไร XYZ คุณจะได้รับ:

ปัญหาหลักคือในองค์ประกอบ textarea เรากำลังเตรียมองค์ประกอบโดยช่องว่างไว้ล่วงหน้าโดยไม่ได้ตั้งใจ

— Hani
แหล่งที่มา