兼容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属性，让里面的文字垂直居中。

暂时就这么多的内容了，以后发现问题会及时补充的。