एचटीएमएल 5 टेक्सारिया प्लेसहोल्डर दिखाई नहीं दे रहा है

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

आप एक ही प्रभाव प्राप्त करने के लिए हमेशा ऑनफोकस और ऑनब्लूर घटनाओं का उपयोग कर सकते हैं। इसके अलावा, आप परीक्षण कर सकते हैं कि प्लेसहोल्डर ब्राउज़र द्वारा समर्थित है या नहीं, जैसे फ़ंक्शन का उपयोग करके: फ़ंक्शन प्लेसहोल्डर आईसुप्रोस्ड () {परीक्षण = document.createElement ('इनपुट'); वापसी (परीक्षण में 'प्लेसहोल्डर'); }

— gentrobot

1

@MarcoJohannesen धन्यवाद! मैं अभी तक ठीक से नहीं बता सकता कि क्या अलग है, लेकिन यह अब काम करता है।

— रूबोजफुल्लो

1

@ user1338065 सुपर। क्या इसलिए कि इसे शरीर के बाहर रखा गया था या?

— मार्को जोहान्सन

671

यह एक हमेशा मेरे लिए और कई अन्य लोगों के लिए एक पकड़ रहा है। संक्षेप में, <textarea>तत्व के लिए उद्घाटन और समापन टैग एक ही पंक्ति पर होना चाहिए, अन्यथा एक नई लाइन चरित्र में रहती है। प्लेसहोल्डर को इसलिए प्रदर्शित नहीं किया जाएगा क्योंकि इनपुट क्षेत्र में सामग्री होती है (एक नई लाइन चरित्र, तकनीकी रूप से, मान्य सामग्री है)।

अच्छा:

<textarea></textarea>

खराब:

<textarea>
</textarea>

अद्यतन (2020)

एचटीएमएल 5 पार्सिंग कल्पना के अनुसार, यह अब सच नहीं है:

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

यदि आप संपादक सीआरएलएफ के साथ लाइनों को समाप्त करने पर जोर देते हैं, तो भी आपको परेशानी हो सकती है।

— पानी का रंग
स्रोत

66

यार, यह जवाब इतना सीधा था, मुझे यकीन नहीं हुआ कि यह सच है! लेकिन मैंने इसे खुद के लिए परीक्षण किया और निश्चित रूप से, पर्याप्त रूप से एक टेक्स्टारिया के अंदर व्हाट्सएप को सामग्री माना जाता है - प्लेसहोल्डर को प्रदर्शित होने से रोकना।

— एरिक एल।

यदि प्लगइन संपादित किया गया था, तो आप jQuery की .trimविधि का उपयोग करके इस समस्या को ठीक कर सकते हैं ।

— SpYk3HH

एक उदाहरण, जेएस में एक टुकड़ा जोड़ना होगा (पहले या प्लगइन कॉल के बाद, इससे कोई फर्क नहीं पड़ता) जो निम्न की तरह दिखता है:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

इसके अलावा, DOM लोड होने के बाद एक नया टेक्सटेरिया तत्व बनाते समय, इसके />बजाय समापन टैग को शामिल करना सुनिश्चित करें >। उदाहरण:$('body').html('<textarea placeholder="test" />');

— पतित

अगर इसके अंदर कोई व्हाट्सएप है तो <textarea>इसका मतलब है कि टैक्स्टेरिया खाली नहीं है, इसलिए किसी प्लेसहोल्डर के लिए कोई फायदा नहीं है। :)

— एडू रुइज़

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

— प्रमुख डेवलपर
स्रोत

अंतरिक्ष इसे मारता है? अजीब।

— एंड्रयूलेओर्डी

2

यह अंतरिक्ष को एक मूल्य के रूप में मानता है।

— लीड डेवलपर

9

इसकी वजह यह है कि कहीं एक जगह है। मैं jsfiddle का उपयोग कर रहा था और टैग के बाद एक स्थान था। अंतरिक्ष को हटाने के बाद मैंने काम करना शुरू कर दिया

— मैथ्यू
स्रोत

वाह! मेरे पास अगली पंक्ति में क्लोजिंग टेक्स्टरी टैग था, 4 रिक्त स्थान का संकेत दिया> वे अदृश्य स्थान टेक्स्टारिया में हैं, लेकिन मुझे एहसास नहीं हुआ कि जब तक मैंने प्लेसहोल्डर का उपयोग करने की कोशिश नहीं की। Textarea टैग खोलने और बंद करने के बीच कोई स्थान नहीं!

— DOK

5

खैर, तकनीकी रूप से इसे उसी लाइन पर नहीं होना है, जब तक कि समापन टैग से अंत ">" और समापन टैग से "<" के बीच कोई चरित्र न हो। आप ...></textarea>नीचे दिए गए उदाहरण के साथ समाप्त करने की आवश्यकता है :

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

— कोनी पी
स्रोत

3

मुझे पता है कि यह पोस्ट Aquarelle द्वारा उत्तरित (बहुत अच्छी तरह से) की गई है, लेकिन अगर किसी के पास कोई टैग के साथ अन्य टैग रूपों के साथ यह समस्या हो रही है जैसे कि इनपुट मैं इसे यहाँ छोड़ दूँगा:

यदि आपके पास अपने फॉर्म में एक इनपुट है और प्लेसहोल्डर नहीं दिखा रहा है क्योंकि शुरुआत में एक सफेद स्थान, यह आपके लिए "मान" विशेषता के कारण हो सकता है। यदि आप इनपुट जाँच के मान को भरने के लिए चर का उपयोग कर रहे हैं, तो अल्पविराम और चर के बीच कोई सफेद स्थान नहीं है।

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

इस स्थिति में {{}} के बीच का टैग परिवर्तनशील है, बस सुनिश्चित करें कि आप कॉमा के बीच रिक्त स्थान नहीं छोड़ रहे हैं क्योंकि सफेद स्थान भी एक वैध चरित्र है।

— SpicyTacos23
स्रोत

2

के <textarea></textarea>रूप में उद्घाटन और समापन टैग के बीच एक जगह छोड़ने के बजाय का उपयोग करें<textarea> </textarea>

— अभी तक
स्रोत

4

यह कुछ भी नहीं है कि मौजूदा जवाब पहले से ही पता नहीं है कहते हैं।

— सभी कार्यकर्ता

0

हमारे मामले में ओपनिंग और क्लोजिंग टैग के बीच टेक्स्टारिया टैग में स्पेस या न्यूलाइन कैरेक्टर या कोई टेक्स्ट (वैल्यू) नहीं होना चाहिए ।

यदि कोई स्थान, न्यूलाइन वर्ण या कोई पाठ है, तो इसे मूल्य के रूप में माना जाता है जो प्लेसहोल्डर को ओवरराइड करता है।

    **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 तत्व में हम अनजाने में सफेद स्थान द्वारा तत्व को पूर्वनिर्मित कर रहे हैं।

— हानी
स्रोत