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)">

這樣就大工告成了。