zoukankan      html  css  js  c++  java
  • input type date 解决移动端显示placeholder

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

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

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

    方法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即可解决.

  • 相关阅读:
    BZOJ 4710: [Jsoi2011]分特产
    P4859 已经没有什么好害怕的了
    BZOJ 2839 集合计数
    P1450 [HAOI2008]硬币购物
    P3440 [POI2006]SZK-Schools
    P4177 [CEOI2008]order
    对于最小割的进一步理解
    P2774 方格取数问题
    JAVA网络编程TCP通信
    JAVA多线程及补充
  • 原文地址:https://www.cnblogs.com/gxp69/p/7508540.html
Copyright © 2011-2022 走看看