input type=date 移动端显示placeholder失效问题

1.html ：监听input失去焦点和获取焦点的事件

2.css:用伪类去为input模拟一个placeholder

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

3.js (此处用vue实现)

export default {
	data() {
		return {
			birthday:'',
		}
	},
	methods:{
	    inputBlur(e){
	          $(window).scrollTop(0,0);
		  if(this.birthday == '') e.target.setAttribute('placeholder','出生年月日');
	    },
	    inputFocus(e){
                   e.target.removeAttribute('placeholder');
	    }
	}
}

原生js同样的方法实现：

var o = document.getElementById('date');
o.onfocus = function(){
    this.removeAttribute('placeholder');
};
o.onblur = function(){
    if(this.value == '') this.setAttribute('placeholder','出生年月日');
};