HTML5技术

input type date 解决移动端显示placeholder - Jade_g

字号+ 作者:H5之家 来源:H5之家 2017-09-12 11:06 我要评论( )

在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用。 如果是这样的效果,那么客户体验是可想而知的差了。 最后想了一下,想到用css+js双保险来搞定它。 方法1: css: input[type="date"]:before { content

 

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

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

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

方法1:

css:

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

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

现在是js登场了。

方法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 type="date" placeholder="请选择出生日期">

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html 中input标签的name属性 - wwqqnn

    html 中input标签的name属性 - wwqqnn

    2017-09-03 13:24

  • 自动化的基于TypeScript的HTML5游戏开发 - wildfirecode

    自动化的基于TypeScript的HTML5游戏开发 - wildfirecode

    2017-08-30 16:01

  • form表单上传域(type=file)的使用----上传文件 - 垂死挣扎的千年虫

    form表单上传域(type=file)的使用----上传文件 - 垂死挣扎的千年虫

    2017-08-03 13:00

  • jQuery.validate 的form校验 - 那一刻~~~掩护你

    jQuery.validate 的form校验 - 那一刻~~~掩护你

    2017-06-21 18:03

网友点评
t