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

這樣就大工告成了。