摘要：
在最近的一个项目中使用到了html5的一个新标签属性,type="date"时，发现placeholder属性失效无法使用。最后想了一下，想到用css+js双保险来搞定它。方法1：css：input[type="date"]:before{content:attr;//强制给placeholder属性color:#aaa;//这种灰色应该是最适合的}做到这一步还不行，因为当输入框有值之后，placeholder还是不能隐藏消失。现在是js登场了。˂inputtype="date"name="birthday"id="birthday"class="txt1"datatype="*"nullmsg="请设置出生日期！"placeholder="请设置出生日期！important;}js:$.on;html:这里说明一下,input不设置高度的话在安卓下会placeholder跟date同时显示而且显示两行,限制高度加overflow即可解决.
在最近的一个项目中使用到了html5的一个新标签属性,type="date"时，发现placeholder属性失效无法使用。
如果是这样的效果，那么客户体验是可想而知的差了。
最后想了一下，想到用css+js双保险来搞定它。
方法1：
css：
input[type="date"]:before{ content:attr(placeholder);//强制给placeholder属性 color:#aaa;// 这种灰色应该是最适合的 }
做到这一步还不行，因为当输入框有值之后，placeholder还是不能隐藏消失。
现在是js登场了。
<input type="date"name="birthday"id="birthday"class="txt1"datatype="*"nullmsg="请设置出生日期！"placeholder="请设置出生日期！"onfocus="this.removeAttribute('placeholder')" >
方法2：
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 type="date" placeholder="请选择出生日期" style="height:41px;overflow: hidden;">
这里说明一下, input不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.