手机端input[type=date]的时候placeholder不起作用解决方案

手机端input[type=date]的时候placeholder不起作用解决方案

目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。
那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。
移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好，很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。
经过尝试可以设置input的 value值，但必须是日期格式才会正确显示，否则就会直接忽略掉。

<input type="date" value="2012-05-10" id="date">

但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。

CSS部分

用伪类去为input模拟一个placeholder

1 2 3 扫描二维码关注公众号，回复： 4246305 查看本文章 4

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

这样也是不够的，你会发现在用户选了日期以后我们模拟的默认文字还在。

JS部分

既然我们用到了placeholder属性，那么在用户选择的时候就删除此属性，之后需要的话再添加回来。

var o = document.getElementById('date');
o.onfocus = function(){
    this.removeAttribute('placeholder');
};
o.onblur = function(){
    if(this.value == '') this.setAttribute('placeholder','我是日期');
};

顺便说下非date类型的input设置placeholder颜色的css

::-webkit-input-placeholder {
    color:red;
}