H5自带的type=date或者month等日期控件移动端显示placeholder

Posted 2020-09-27 芦苇荡

H5自带的type=date或者month等日期控件移动端placeholder会无法显示

解决方法：

html部分

<li class="info-item select-item">
    <input type="month" class="info-input time" placeholder="*入学时间" id="time-sel">
    <span class="icon icon-menu-down"></span>
</li>

css部分

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


input[type="date"].full:before {
    color:black;
    content:""!important;
}

scss写法

/* 解决input为month类型时的placeholder问题 */
input[type="month"]{
    &:before{
        color:#b2b2b2;
        content:attr(placeholder);        
    }

    &.full{
        &:before{
            color:black;
            content:""!important;            
        }
    }
}

js部分

        //选择入学时间解决input为month类型时placeholder的问题
        $("#time-sel").on("input",function(){
           if($(this).val().length>0){
                $(this).addClass("full");
            }else{
                $(this).removeClass("full");
            }
        });