ie上如何兼容placeholder

首先，判斷瀏覽器是否支持placeholder屬性：

var input = document.createElement('input');
if("placeholder" in input){
    alert('支持');
}else{
    alert('不支持');
}

 

（1）如果只需要讓不支持placeholder的瀏覽器能夠支持改功能，並不要求支持原生placeholder的瀏覽器表現一致，那么可以采用如下方法：

Placeholder在不支持html5的低版本的瀏覽器中，placeholder屬性是無效的，非現代瀏覽器( 例如 IE6-IE9 )是不支持placeholder屬性的

 function placeholder(nodes,pcolor) {
      if(nodes.length && !("placeholder" in document_createElement_x("input"))){
          for(i=0;i
              var self = nodes[i],
                  placeholder = self.getAttribute('placeholder') || '';     
              self.onfocus = function(){
                  if(self.value == placeholder){
                     self.value = '';
                     self.style.color = "";
                  }               
              }
              self.onblur = function(){
                  if(self.value == ''){
                      self.value = placeholder;
                      self.style.color = pcolor;
                  }              
              }                                       
              self.value = placeholder;  
              self.style.color = pcolor;              
          }
      }
    }    

（2）如果需要自定義樣式，並且希望placeholder在所有瀏覽器下表現一致，可以通過利用label標簽模擬一個placeholder的樣式放到輸入框上，當輸入框獲得焦點的時候，隱藏label，當輸入框失去焦點的時候，顯示label。 或者是在input上應用背景圖片，獲得和失去焦點的時候切換背景圖片是否顯示。

<script>
$(function(){
    $('.for_text').click(function(){
        $('.text').focus()
    })
    $('.text').blur(function(){
        $('.for_text').hide();
    })
})
</script>
<style>
.for_text{ position:absolute; cursor:text; margin:5px; color:#999;}
.text{ padding:5px;}
</style>
<form>
<label for="text" class="for_text">請輸入文本</label>
<input type="text" name="text" class="text"/>
</form>

 

（3）jquery解決方案：

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

（4）最后一種方法，也是使用最常見的，但是不能改變文本的顏色，使用腳本的方式判斷文本框的值，獲取焦點或者輸入文本的時候，如果為預設的值，那么就清空文本框，失去焦點的時候，如果文本框的值為空，則替換為我們預設的值。

<input type="text" name="text" value="請輸入文本" class="text"
onFocus="if(this.value=='請輸入文本') this.value = ''"
onBlur="if(this.value=='') this.value='請輸入文本'"
/>

拓展：

想改變Placeholder文字的顏色，並不想改變輸入文字的顏色。正確的寫法如下：

::-moz-placeholder{color:red;}              //Firefox
::-webkit-input-placeholder{color:red;}     //Chrome,Safari
:-ms-input-placeholder{color:red;}          //IE10