對所有IE瀏覽器的HTML5佔位符問題

Question

我似乎對HTML5佔位符有一個奇怪的問題。 即時通訊使用下拉菜單來顯示/隱藏div和一個div內我有幾個文本字段

當我從下拉選擇其中一個選項來顯示div時，div顯示出來但佔位符不是在文本字段中。

任何幫助，將不勝感激。

The place holder plugin

<script type='text/javascript'> 
$(document).ready(function(){ 
$("#customertype").change(function() { 
      if ($("#customertype option[value='new']").attr('selected')) { 
        $('#newcustomer').show(); 

      } 
      if ($("#customertype option[value='existingcustomer']").attr('selected')) { 
       $('#newcustomer').hide(); 
        $('#existingcustomer').show(); 
      } 
     }); 
     }); 
     </script> 

    <!--Start New Customer --> 
      <div id="newcustomer" style="display:none;"> 
       <div id="field"> <span id="sprytextfield5"> 
       <input class="input address" type="text" name="address" placeholder="Enter Mailing Address" id="address" /> 
       </span> <span id="sprytextfield6"> 
       <input class="input" type="text" name="city" placeholder="Enter City" id="city" /> 
       </span> <span id="sprytextfield7"> 
       <input class="input" type="text" name="province" placeholder="Enter Province" id="province" /> 
       </span> <span id="sprytextfield8"> 
       <input class="input" type="text" name="postalcode" placeholder="Enter Postal Code" id="postalcode" /> 
       </span> </div> 
      </div> 
      <!--End New Customer --> 

Answer 1

IE不支持佔位符，至少到9

https://github.com/madeinstefano/ie-placeholder/blob/master/ie-placeholder.js

使用下面的代碼：

//IE placeholder; 
$(function(){ 
    if (/MSIE 9|MSIE 8|MSIE 7|MSIE 6/g.test(navigator.userAgent)) { 
    function resetPlaceholder() { 
     if ($(this).val() === '') { 
     $(this).val($(this).attr('placeholder')) 
      .attr('data-placeholder', true) 
      .addClass('ie-placeholder'); 
     if ($(this).is(':password')) { 
      var field = $('<input />'); 
      $.each(this.attributes, function (i, attr) { 
      if (attr.name !== 'type') { 
       field.attr(attr.name, attr.value); 
      } 
      }); 
      field.attr({ 
      'type': 'text', 
      'data-input-password': true, 
      'value': $(this).val() 
      }); 
      $(this).replaceWith(field); 
     } 
     } 
    } 

    $('[placeholder]').each(function() { 
     //ie user refresh don't reset input values workaround 
     if ($(this).attr('placeholder') !== '' && $(this).attr('placeholder') === $(this).val()){ 
     $(this).val(''); 
     } 
     resetPlaceholder.call(this); 
    }); 
    $(document).on('focus', '[placeholder]', function() { 
     if ($(this).attr('data-placeholder')) { 
     $(this).val('').removeAttr('data-placeholder').removeClass('ie-placeholder'); 
     } 
    }).on('blur', '[placeholder]', function() { resetPlaceholder.call(this); }); 
    $(document).on('focus', '[data-input-password]', function() { 
     var field = $('<input />'); 
     $.each(this.attributes, function (i, attr) { 
     if (['type','data-placeholder','data-input-password','value'].indexOf(attr.name) === -1) { 
      field.attr(attr.name, attr.value); 
     } 
     }); 
     field.attr('type', 'password').on('focus', function() { this.select(); }); 
     $(this).replaceWith(field); 
     field.trigger('focus'); 
    }); 
    } 
});