प्लेसहोल्डर टेक्स्ट को jQuery का उपयोग करके बदलें

Question

मैं एक jQuery प्लेसहोल्डर प्लगइन (https://github.com/danielstocks/jQuery-Placeholder) का उपयोग कर रहा हूं। मुझे ड्रॉपडाउन मेनू में परिवर्तन के साथ प्लेसहोल्डर पाठ को बदलने की आवश्यकता है। लेकिन यह नहीं बदल रहा है। यहाँ कोड है:

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
});

मेरा एचटीएमएल:

<div class="filterbox">
        <select name="ddselect" id="serMemdd">
            <option value="1" selected="selected">Search by Name</option>
            <option value="2">Search by ID</option>
            <option value="3">Search by Location</option>
        </select>
        <input id="serMemtb" type="text" style="width: 490px" placeholder="Type a name    (Lastname, Firstname)" />
        <input id="seMemBut" type="button" value="Search" />
    </div>

क्या कोई इसका पता लगा सकता है?

Comments

क्या आप अपना html प्रदान कर सकते हैं?

— तीमुथियुस हारून

@TimothyAaron मैंने

— Krish

@ बेलनकौरस - बीएस में इसका निर्माण नहीं है। प्लेसहोल्डर विशेषता मूल रूप से आधुनिक ब्राउज़रों में काम करती है, लेकिन IE के लिए कोई पॉलीफिल नहीं है: github.com/twitter/bootstrap/issues/2401

— जेनी यूनीसेन

Answer 1

$(document).ready(function(){ 
  $('form').find("input[type=textarea], input[type=password], textarea").each(function(ev)
  {
      if(!$(this).val()) { 
     $(this).attr("placeholder", "Type your answer here");
  }
  });
});

इस कोड को अपनी js फ़ाइल में कॉपी और पेस्ट करें, इससे पूरी साइट से सभी प्लेसहोल्डर टेक्स्ट बदल जाएंगे।

Comments

आप if-statement को छोड़ देना चाहिए , जैसा कि आमतौर पर आप प्लेसहोल्डर को सेट करना चाहते हैं चाहे इनपुट तत्व का कोई मूल्य हो या न हो। अन्यथा, कोई प्लेसहोल्डर नहीं दिखाया गया है यदि उपयोगकर्ता इनपुट तत्व को खाली करता है।

— नॉट

Answer 2

आईडी द्वारा प्लेसहोल्डर को अपडेट करने के लिए आप निम्न कोड का उपयोग कर सकते हैं:

$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();

Answer 3

बस आप उपयोग कर सकते हैं

$("#yourtextboxid").attr("placeholder", "variable");

जहां, यदि वेरिएबल स्ट्रिंग है तो आप ऊपर की तरह उपयोग कर सकते हैं, यदि यह वेरिएबल है तो इसे "वैरिएबल" की तरह डबल कोट्स के साथ नाम दें।

जैसे: $("#youtextboxid").attr("placeholder", variable); यह काम करेगा।

Answer 4

प्लगइन बहुत मजबूत नहीं दिखता है। यदि आप .placeholder()फिर से कॉल करते हैं, तो यह एक नया Placeholderउदाहरण बनाता है जबकि घटनाएँ अभी भी पुरानी हैं।

कोड को देखते हुए, ऐसा लगता है कि आप ऐसा कर सकते हैं:

$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();

---

संपादित करें

placeholderएक है एचटीएमएल 5 विशेषता , लगता है, जो इसे समर्थन नहीं कर रहा है?

आपका प्लगइन वास्तव में इस तथ्य से उबरने में आपकी मदद नहीं करता है कि IE इसका समर्थन नहीं करता है, इसलिए जब मेरा समाधान काम करता है, तो आपका प्लगइन नहीं करता है। आप ऐसा क्यों नहीं करते हैं।

Answer 5

$(this).val()एक तार है। parseInt($(this).val(), 10)'1' के लिए उपयोग या जाँच करें । दस को आधार 10 निरूपित करना है।

$(function () {
    $('input[placeholder], textarea[placeholder]').blur();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == '1') {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == '2') {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == '3') {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

या

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = parseInt($(this).val(), 10);
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

अन्य प्लगइन्स

ओरी ने मेरे ध्यान में लाया है कि आप जिस प्लगइन का उपयोग कर रहे हैं वह IEs HTML विफलता को दूर नहीं करता है।

कुछ इस तरह से कोशिश करें: http://archive.plugins.jquery.com/project/input-placeholder

Comments

ओपी के लिए ध्यान दें: यह भी ध्यान दें कि परिवर्तन ईवेंट का चयन पाठ बॉक्स पर किया गया है, न कि टेक्स्ट इनपुट पर। $('#serMemdd').change(function () {

— बेंजम

मुझे लगता है कि सीरमैड डीडीएल के आधार पर प्लेसहोल्डर टेक्स्ट संदर्भ को संवेदनशील बनाने की कोशिश करने में संकोच है। मुझे नही पता।

— जेसन

हाँ, यह मुझे ऐसा लगता है, लेकिन उसके जेएस में, उसने परिवर्तन की घटना को textarea के लिए झुका दिया है, जो कि वह नहीं है जहां उसे कार्यक्षमता के बाद होने पर हुक किया जाना चाहिए। इसलिए मुझे आपके कोड में उस परिवर्तन के लिए एक नोट कहा गया, यदि वह जागरूक नहीं था।

— बेंजाम

यदि आप इसे एक बार से अधिक कहते हैं, तो। हालांकि इसे स्थापित करने के लिए आपको इसे अपने doc.ready में कॉल करना चाहिए।

— जेसन

<select name = "ddselect" id = "serMemdd">

— जेसन

Answer 6

जावास्क्रिप्ट और जेकरी का उपयोग करके गतिशील प्लेसहोल्डर का काम करने वाला उदाहरण http://jsfiddle.net/ogk2L14n/1/

<input type="text" id="textbox">
 <select id="selection" onchange="changeplh()">
     <option>one</option>
     <option>two</option>
     <option>three</option>
    </select>

function changeplh(){
    debugger;
 var sel = document.getElementById("selection");
    var textbx = document.getElementById("textbox");
    var indexe = sel.selectedIndex;

    if(indexe == 0) { 
     $("#textbox").attr("placeholder", "age");

}
       if(indexe == 1) { 
     $("#textbox").attr("placeholder", "name");
}
}

Answer 7

jquery का उपयोग करके प्लेसहोल्डर टेक्स्ट बदलें

इसे इस्तेमाल करे

$('#selector').attr("placeholder", "Type placeholder");

Answer 8

अपनी पहली पंक्ति को नीचे ले जाना मेरे लिए है: http://jsfiddle.net/tcloninger/SEmNX/

$(function () {
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
    $('input[placeholder], textarea[placeholder]').placeholder();
});

Comments

... ठीक है, मेरे लिए वैसे भी क्रोम में प्लेसहोल्डर विशेषता बदल रही है। जब मैं इसे IE में जांचता हूं, तो विशेषता बदल रही है, लेकिन यह वास्तव में इसे प्रदर्शित नहीं कर रहा है। क्या आप वाकई एक विश्वसनीय प्लगइन हैं?

— तीमुथियुस हारून

Answer 9

यदि इनपुट div के अंदर है तो आप यह कोशिश कर सकते हैं:

$('#div_id input').attr("placeholder", "placeholder text");

Answer 10

इसे इस्तेमाल करे

$('#Selector_ID').attr("placeholder", "your Placeholder");

Answer 11

यह मेरे लिए काम किया:

jQuery('form').attr("placeholder","Wert eingeben");

लेकिन अब यह काम नहीं करता है:

// Prioritize "important" elements on medium.
            skel.on('+medium -medium', function() {
                jQuery.prioritize(
                    '.important\\28 medium\\29',
                    skel.breakpoint('medium').active
                );
            });

Answer 12

$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});

Answer 13

$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});