jQuery इनपुट मान फोकस और धुंध

Question

मेरे पास निम्न कोड है ताकि जब कोई उपयोगकर्ता इनपुट बॉक्स का चयन करता है तो मान गायब हो जाएगा, लेकिन उपयोगकर्ता द्वारा इसे बंद करने के बाद डिफ़ॉल्ट मान फिर से डाला जाएगा।

 $(function() { 
      var defaultText = ''; 
      $('input[id=input]').focus(function() { 
       defaultText = $(this).val(); 
       $(this).val(''); 
      }); 
      $('input[id=input]').blur(function() { 
       $(this).val(defaultText); 
      }); 
     }); 

हालांकि, यह बिल्कुल ठीक नहीं है कि मैं इसे कैसे चाहता हूं। यदि कोई उपयोगकर्ता टेक्स्ट सम्मिलित करता है तो मैं नहीं चाहता कि डिफ़ॉल्ट टेक्स्ट तब उपयोगकर्ता को जो ओवरराइड करता है उसे ओवरराइड करें। मैं jQuery के लिए बिल्कुल नया हूं इसलिए किसी भी मदद की सराहना की जाएगी।

Answer 1

अपने focus() विधि आप अगर यह यह साफ़ करने से पहले defaultText के बराबर होती है देखने के लिए जाँच करनी चाहिए, और अपने blur() समारोह में में, आप बस अगर val()defaultText सेट करने से पहले खाली हो गया है की जाँच की जरूरत है। यदि आप एकाधिक इनपुट के साथ काम करने जा रहे हैं, तो आईडी के बजाय कक्षा का उपयोग करना बेहतर है, इसलिए कक्षा "इनपुट" होने पर आपका चयनकर्ता input.input होगा। भले ही यह एक आईडी था, आप इसे input#input के रूप में संदर्भित करेंगे।

// run when DOM is ready() 
$(document).ready(function() { 
    $('input.input').on('focus', function() { 
     // On first focus, check to see if we have the default text saved 
     // If not, save current value to data() 
     if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val()); 

     // check to see if the input currently equals the default before clearing it 
        if ($(this).val()==$(this).data('defaultText')) $(this).val(''); 
    }); 
    $('input.input').on('blur', function() { 
     // on blur, if there is no value, set the defaultText 
     if ($(this).val()=='') $(this).val($(this).data('defaultText')); 
    }); 
}); 

इसे this jsFiddle में कार्रवाई में सेट करें।

Answer 2

अपने कलंक हैंडलर में सिर्फ अगर उपयोगकर्ता कुछ भी नहीं लिखा गया है की जाँच करें, यह मामला वापस डिफ़ॉल्ट पाठ डाल में, इस तरह:

  $('input[id=input]').blur(function() { 
      if ($(this).val() == '') { 
       $(this).val(defaultText); 
      } 
     }); 

Answer 3

एक पुरानी सवाल + मैं इसे नापसंद है, जब लोग बजाय एक और समाधान की पेशकश मेरी समस्या को ठीक करने के लिए लेकिन फिर भी: एक jQuery प्लगइन के साथ एक HTML प्लेसहोल्डर विशेषता का उपयोग करने से समस्या हल हो जाएगी।

आप HTML डेटा-विशेषताओं का भी उपयोग कर सकते हैं और उस से लिख/पढ़ सकते हैं।