placeholder浏览器兼容（ie9以上）解决方案

2019独角兽企业重金招聘Python工程师标准>>>

html： 

<div class="placeholder">
     <input type="text">
</div>

css： 

.placeholder{
   position:relative;
}
.placeholder::after{/*伪元素模拟placeholder*/
   content:'请输入名称';
   position:absolute;
   color:#757575;
   font-size:12px;
   top:4px;
   left:3px;
}

js： 

$(function(){
   if($('.placeholder input').val != ''){//初始化判断input是否有值，如果有则移除父元素class
       $('.placeholder').removeClass('placeholder');
   }
   $('.placeholder input').on('focus',function(){//获取焦点，移除placeholder类
       $(this).parent().removeClass('placeholder');
   }).on('blur',function(){//失去焦点，移除placeholder类
       if($(this).val() == ''){
          $(this).parent().addClass('placeholder');
       }
   })
})

原理：

通过css伪元素after和定位，将placeholder显示内容定位到input中，并通过js监听input的focus和blur事件，进而判断何时添加或移除input父元素placeholder类，达到真正placeholder效果。

ps：测试通过兼容ie9

转载于:https://my.oschina.net/jingyao/blog/1544927