input type date 解决移动端显示placeholder.

网上找的方法苹果可以了 安卓显示总有问题.

加了段CSS就完美解决了,就是UC有点奇葩

以下是我测试的浏览器:

微信--OK.

QQ浏览器--OK

谷歌浏览器--OK

UC浏览器(业界奇葩),前面会有空白

css

input[type="date"]:before{
    color:#A9A9A9;
    content:attr(placeholder);
}


input[type="date"].full:before {
    color:black;
    content:""!important;
}

js

$("#date").on("input",function(){
   if($(this).val().length>0){
   $(this).addClass("full");
}
else{
  $(this).removeClass("full");
  }
 });

html

 

这里说明一下, input不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.