input type date 解决移动端显示placeholder

作者:分分快三计划

方法1:

css:

input[type="date"]:before{
    content: attr(placeholder);//强制给placeholder属性
    color:#aaa;// 这种灰色应该是最适合的
}

姣好这一步还非常,因为当输入框有值之后,placeholder仍旧无法隐敝消失。

现在是js登场了。

<input type="date" name="birthday" id="birthday" class="txt1" datatype="*" nullmsg="请设置出生日期!" placeholder="请设置出生日期!" onfocus="this.removeAttribute('placeholder')" >

方法2:

css:

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


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

js:

$("#date").on("input",function(){
   if($(this).val().length>0){
   $(this).addClass("full");
}
else{
  $(this).removeClass("full");
  }
 });

html:

<input id="date" class="weui_input" type="date" placeholder="请选择出生日期" style="height:41px;overflow: hidden;">

此地说美素佳儿下, input不设置中度的话在安卓下会placeholder 跟date 同有时间显示何况显示两行, 节制中度加overflow就可以消除.

 

在这里二日的三个项目中央银行使到了html5的三个新标签属性,type="date"时,发掘placeholder属性失效不能采用。

最终想了刹那间,想到用css js双作保来解决它。

假假若如此的功能,那么客商体验是一句话来说的差了。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划