javascript आईई 9 में प्लेसहोल्डर



5 Answers

मुझे लगता है कि यह वही है जो आप खोज रहे हैं: jquery-html5-placeholder-fix

प्लेसहोल्डर समर्थित है या नहीं यह निर्धारित करने के लिए यह समाधान फीचर डिटेक्शन ( modernizr माध्यम से) का उपयोग करता है। यदि नहीं, समर्थन जोड़ता है (jQuery के माध्यम से)।

javascript html html5 internet-explorer-9 placeholder

ऐसा लगता है कि यह एक बहुत ही अच्छी तरह से ज्ञात समस्या है लेकिन Google पर मिले सभी समाधान मेरे नए डाउनलोड किए गए IE9 पर काम नहीं करते हैं।

input और textarea टैग पर Placeholder संपत्ति को सक्षम करने के लिए आपका पसंदीदा तरीका कौन सा है?

वैकल्पिक: मैंने उस पर बहुत समय खो दिया और अभी तक required संपत्ति की तलाश नहीं की। क्या इसके लिए आपके पास कुछ सलाह भी होगी? जाहिर है, मैं PHP में मान की जांच कर सकता हूं, लेकिन उपयोगकर्ता की सहायता के लिए यह संपत्ति बहुत सुविधाजनक है।




यहां एक बेहतर समाधान है। http://bavotasan.com/2011/html5-placeholder-jquery-fix/ मैंने इसे केवल IE10 के अंतर्गत ब्राउज़र के साथ काम करने के लिए थोड़ा सा अपनाया है

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

    <script>
    // Placeholder fix for IE
      $('.lt-ie10 [placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
          i.val('').removeClass('placeholder');
          if(i.hasClass('password')) {
            i.removeClass('password');
            this.type='password';
          }     
        }
      }).blur(function() {
        var i = $(this);  
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
          if(this.type=='password') {
            i.addClass('password');
            this.type='text';
          }
          i.addClass('placeholder').val(i.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        //if($(this).validationEngine('validate')) { // If using validationEngine
          $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
              i.val('');
              i.removeClass('placeholder');

          })
        //}
      });
    </script>
    ...
    </html>



प्लेसहोल्डर का समर्थन नहीं कर रहे ब्राउज़र का पता लगाने के लिए mordernizr का उपयोग करके, मैंने उन्हें ठीक करने के लिए यह छोटा कोड बनाया।

//If placeholder is not supported
if (!Modernizr.input.placeholder){ 

    //Loops on inputs and place the placeholder attribute
    //in the textbox.
    $("input[type=text]").each( function() { 
       $(this).val($(this).attr('placeholder')); 
    })
}



पार्टी के लिए थोड़ा देर हो चुकी है लेकिन मैं अपने प्रयास किए गए और भरोसेमंद जेएस का उपयोग करता हूं जो Modernizr लाभ उठाता है। प्रतिलिपि / चिपकाया जा सकता है और किसी भी परियोजना पर लागू किया जा सकता है। हर समय काम करता है:

// Placeholder fallback
if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}



मैं आमतौर पर http://cdnjs.com/ का काफी अधिक सोचता हूं और वे सूचीबद्ध हैं:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

सुनिश्चित नहीं है कि कौन सा कोड है लेकिन यह सीधे दिखता है:

document.observe('dom:loaded', function(){
  var _test = document.createElement('input');
  if( ! ('placeholder' in _test) ){
    //we are in the presence of a less-capable browser
    $$('*[placeholder]').each(function(elm){
      if($F(elm) == ''){
        var originalColor = elm.getStyle('color');
        var hint = elm.readAttribute('placeholder');
        elm.setStyle('color:gray').setValue(hint);
        elm.observe('focus',function(evt){
          if($F(this) == hint){
            this.clear().setStyle({color: originalColor});
          }
        });
        elm.observe('blur', function(evt){
          if($F(this) == ''){
            this.setValue(hint).setStyle('color:gray');
          }
        });
      }
    }).first().up('form').observe('submit', function(evt){
      evt.stop();
      this.select('*[placeholder]').each(function(elm){
        if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
      });
      this.submit();
    });
  }
});



Related