兼容IE8的input輸入框的正確使用姿勢

input是一個很常見的標簽，大家使用的也很常見，但是我在具體的工作中發現要想完美的使用這個標簽還是任重而道遠，下面是我碰到的幾個問題。

1、我們在使用這個標簽的時候會習慣的加上placeholder這個屬性，起到一個提示的作用，但是當我們的光標移入的時候提示的文字並沒有消失，這樣就不是我們想要的結果了，這時就需要在input的屬性里面再加上兩個屬性：

onfocus="this.placeholder='' "

 

onblur="this.placeholder='需要輸入的內容'"

 

很簡單的方法，第一個屬性的意思是當焦點在這個輸入框時，placeholder的內容是空的，第二個屬性的意思是當這個輸入框失去焦點時顯示的內容。

2、IE10及以下的版本並不支持這個屬性，那么怎么讓其在IE10以下仍然可以實現這個效果呢，只需要在js文件里面引入一段腳本即可:

$(function(){
  //判斷瀏覽器是否支持placeholder屬性
  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //輸入的字符不為灰色
     input.keydown(function(){
       $(this).removeClass("phcolor");
     });
   };
   //當瀏覽器不支持placeholder屬性時，調用placeholder函數
   if(!supportPlaceholder){
     $('input').each(function(){
       text = $(this).attr("placeholder");
       if($(this).attr("type") == "text"){
         placeholder($(this));
       }
     });
   }
 });

這時你會發現，placeholder的字體顏色不是 我們需要的顏色，這時你需要在css里面添加一個新的類名 phcolor，對其進行操作就可以實現了。

3、同時還要注意的是，在其他瀏覽器里默認的輸入的文字都是垂直居中的，但是在IE8中卻是頂格，我們需要給其加上line-height屬性，讓里面的文字垂直居中。

暫時就這么多的內容了，以后發現問題會及時補充的。