रूबी ऑन रेल्स: मैं f.text_field में प्लेसहोल्डर टेक्स्ट कैसे जोड़ूँ?

144

मैं placeholderअपने f.text_fieldखेतों में पाठ कैसे जोड़ सकता हूं ताकि पाठ डिफ़ॉल्ट रूप से लिखा जाए, और जब कोई उपयोगकर्ता खेतों के अंदर क्लिक करता है, तो पाठ दूर चला जाता है - उपयोगकर्ता को नए पाठ में टाइप करने की अनुमति देता है?

ruby-on-rails

— NullVoxPopuli
स्रोत

HTML5 इस का समर्थन करता है। इस बीच, जावास्क्रिप्ट समाधान हैं ।

— घोपे

3

मैं खदान के बजाय nslocum का उत्तर जोड़ने का सुझाव देता हूं। उनका रेल 3 के लिए सही है।

— चक कैलेब्स

269

रेल> = 3.0 के साथ, आप बस placeholderविकल्प का उपयोग कर सकते हैं ।

f.text_field :attr, placeholder: "placeholder text"

— nslocum
स्रोत

4

"प्लेसहोल्डर" विशेषता केवल HTML5 सहायक ब्राउज़रों द्वारा समर्थित है, जो इंटरनेट एक्सप्लोरर जैसे ब्राउज़र को छोड़ देता है।

— ट्रैविस -148

1

JQuery ठीक लिए सही URL है hagenburger.net/BLOG/...

— szeryf

1

@ केडीपी: रेल्स 2 में यह समान प्रतीत होता है, हालाँकि आपको पुरानी विशेषता सिंटैक्स की आवश्यकता हो सकती है:f.text_field :attr, :placeholder => "placeholder text"

— mwfearnley

क्या एक लंबे समय के पाठ को जोड़ना संभव है - शायद एक अलग HTML फ़ाइल के रूप में - एक प्लेसहोल्डर के रूप में? मैं उपयोगकर्ताओं को अपनी सामग्री लिखने के लिए एक टेम्पलेट प्रदान करने की कोशिश कर रहा हूं।

— sofarsophie

32

रेल 4 में (एचएएमएल का उपयोग करके):

=f.text_field :first_name, class: 'form-control', autofocus: true, placeholder: 'First Name'

— ज़ोल्टन
स्रोत

15

रेल (4.2) अंतर्राष्ट्रीयकरण (I18n) का उपयोग करने वालों के लिए:

प्लेसहोल्डर विशेषता को सही पर सेट करें:

f.text_field :attr, placeholder: true

और आपकी स्थानीय फ़ाइल में (यानी। en.yml):

en:
  helpers:
    placeholder:
      model_name:
        attr: "some placeholder text"

— cweston
स्रोत

धन्यवाद कि काम किया। मैंने सेट नहीं किया placeholder: true। इस तरह सेट करने के बाद आपने बताया कि यह काम कर रहा है।

— हेंड्रिक

2

यहाँ बहुत क्लीनर सिंटैक्स है अगर उपयोग कर रहा है rails 4+

<%= f.text_field :attr, placeholder: "placeholder text" %>

तो rails 4+अब हैश सिंटैक्स के बजाय इस सिंटैक्स का उपयोग कर सकते हैं

— अभिलाष
स्रोत

1

यह स्वीकृत @nslocum उत्तर से कैसे भिन्न है?

— mlt

@mlt स्वीकृत उत्तर इस उत्तर को प्रदान करने के बाद इसी तरह अद्यतन हुआ।

— अभिलाष

2

मैंने ऊपर दिए गए समाधानों की कोशिश की और यह रेल पर दिखता है। 5. डिफ़ॉल्ट रूप से दूसरा एगमेंट इनपुट फॉर्म का मूल्य है, जो मेरे लिए काम करता था वह था:

text_field_tag :attr, "", placeholder: "placeholder text"

— समृद्ध ओपारा
स्रोत

1

अपने दृश्य टेम्पलेट में, एक डिफ़ॉल्ट मान सेट करें:

f.text_field :password, :value => "password"

आपकी जावास्क्रिप्ट में (यहाँ पर jquery मानकर):

$(document).ready(function() {
  //add a handler to remove the text
});

— जैद श्नाइडर
स्रोत

1

हफिंगटन पोस्ट का खोज क्षेत्र इनपुट तत्व के अंदर जेएस के इस बिट का उपयोग करता है: onfocus="if(this.value=='Search The Huffington Post')this.value=''" value="Search The Huffington Post"एक अच्छे दृष्टिकोण की तरह लगता है।

— नाथन