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

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

 

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

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

CSS部分

用伪类去为input模拟一个placeholder

 

1 2 3 4

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

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

JS部分

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

 

1 2 3 4 5 6 7

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

 

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

 

1 2 3

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