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

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

<input type="date" id="date" v-model="birthday" placeholder="出生年月日"@blur="inputBlur($event)" @focus="inputFocus($event)" />

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','出生年月日');};