博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
input日历类型placeholder移动端不起作用
阅读量:4840 次
发布时间:2019-06-11

本文共 770 字,大约阅读时间需要 2 分钟。

pc端对h5input type=‘date’的兼容不高,好在插件多,而对于移动端来说,系统自带的date非常好用,而且功能强大,对前端来说可以去除好多不必要的代码及事件操控。

近期有用到过这个方便的输入框,发现手机上一进去时显示为一片空白,设置的placeholder不起作用,然后上网查了下,解决方案为css和js协同解决

css部分通过伪类解决

input[type=data]:before{    content:attr(placeholder);    color:#bbb  }

js部分分装两个方法更好的达到体验效果

var COMMONJS={ //清除日历类型默认提示    delDatePlaceholder:function(ele){        ele.removeAttribute('placeholder');    },    //添加日历类型默认提示    setDatePlaceholder:function(ele){        if(!ele.value){ele.setAttribute('placeholder','请选择日期');}    }, //初始化日历提示
initDatePlaceholder:function(){
$("input[type=date]").each(function(){
if(this.value){
this.removeAttribute('placeholder') } }); }
}

设置好了上面的接下来就是调用了

这样就大工告成了。

转载于:https://www.cnblogs.com/mapletao/p/6479536.html

你可能感兴趣的文章
Java基础加强总结(一)——注解(Annotation)
查看>>
嵌入式开发
查看>>
主席树修正
查看>>
DAL层与BLL层的设计原则
查看>>
WCF ria 远程服务器返回:Not Found
查看>>
github 在ubuntu 使用--解决冲突,创建分支
查看>>
spring-aspetjrt
查看>>
SSRS参数不能默认全选的解决方法
查看>>
java编程内容之应该掌握的各方面技术
查看>>
android学习---面试一
查看>>
app 下载更新 file-downloader 文件下载库的简单介绍和使用
查看>>
MySql学习—— 查询性能优化 深入理解MySql如何执行查询
查看>>
IE6下z-index犯癫不起作用bug的初步研究
查看>>
第六次博客作业
查看>>
【排障】为什么你发出去的邮件被退回
查看>>
02: http
查看>>
HTML5 (四)canvas绘图、WebGL、SVG
查看>>
IP 协议首部格式与其配套使用的四个协议(ARP,RARP,ICMP,IGMP)
查看>>
优秀程序设计的18大原则
查看>>
POJ1236(Network of Schools)
查看>>