查看: 2127|回复: 0

[DIV/CSS] input type date 解决移动端显示placeholder

发表于 2017-9-24 08:00:05
句号论坛

在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用。

如果是这样的效果,那么客户体验是可想而知的差了。

最后想了一下,想到用css+js双保险来搞定它。

方法1:

css:

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

做到这一步还不行,因为当输入框有值之后,placeholder还是不能隐藏消失。

现在是js登场了。

  1. <input type="date" name="birthday" id="birthday" class="txt1" datatype="*" nullmsg="请设置出生日期!" placeholder="请设置出生日期!" onfocus="this.removeAttribute('placeholder')" >
复制代码
方法2:

css:

  1. input[type="date"]:before{
  2. color:#A9A9A9;
  3. content:attr(placeholder);
  4. }
  5. input[type="date"].full:before {
  6. color:black;
  7. content:""!important;
  8. }
复制代码

js:

  1. $("#date").on("input",function(){
  2. if($(this).val().length>0){
  3. $(this).addClass("full");
  4. }
  5. else{
  6. $(this).removeClass("full");
  7. }
  8. });
复制代码

html:

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

这里说明一下, input不设置高度的话在安卓下会placeholder 跟date 同时显示 而且显示两行, 限制高度加overflow即可解决.



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条