input日历类型placeholder移动端不起作用

pc端对h5input type=‘date’的兼容不高，好在插件多，而对于移动端来说，系统自带的date非常好用，而且功能强大，对前端来说可以去除好多不必要的代码及事件操控。

近期有用到过这个方便的输入框，发现手机上一进去时显示为一片空白，设置的placeholder不起作用，然后上网查了下，解决方案为css和js协同解决

css部分通过伪类解决

input[type=data]:before{
    content:attr(placeholder);
    color:#bbb  
}

js部分分装两个方法更好的达到体验效果

var COMMONJS={ 
//清除日历类型默认提示
    delDatePlaceholder:function(ele){
        ele.removeAttribute('placeholder');
    },
    //添加日历类型默认提示
    setDatePlaceholder:function(ele){
        if(!ele.value){ele.setAttribute('placeholder','请选择日期');}
    },
//初始化日历提示

initDatePlaceholder:function(){
    $("input[type=date]").each(function(){
        if(this.value){
            this.removeAttribute('placeholder')
        }
    });
}

}

设置好了上面的接下来就是调用了

 <input type="date" onfocus="COMMONJS.delDatePlaceholder(this)" onblur="COMMONJS.setDatePlaceholder(this)">

这样就大工告成了。

转载于:https://www.cnblogs.com/mapletao/p/6479536.html