H5新特性 input type=date 在手机上默认提示显示无效解决办法

时间:2022-09-21 14:39:05

目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。

那么在移动端的话,ios和安卓都是支持的,但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”,但在移动端就是一片空白了。

移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好,很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。

经过尝试可以设置input的 value值,但必须是日期格式才会正确显示,否则就会直接忽略掉。

H5新特性  input type=date 在手机上默认提示显示无效解决办法

但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。

CSS部分

用伪类去为input模拟一个placeholder

H5新特性  input type=date 在手机上默认提示显示无效解决办法这样也是不够的,你会发现在用户选了日期以后我们模拟的默认文字还在。

JS部分

既然我们用到了placeholder属性,那么在用户选择的时候就删除此属性,之后需要的话再添加回来。

H5新特性  input type=date 在手机上默认提示显示无效解决办法顺便说下非date类型的input设置placeholder颜色的css

H5新特性  input type=date 在手机上默认提示显示无效解决办法

完整代码

H5新特性  input type=date 在手机上默认提示显示无效解决办法

本头条号将对以后更新的文章进行归类,以方便大家阅读。比如文章的标题以Bootstrap开头,这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头,请各位客官留意。

H5新特性 input type=date 在手机上默认提示显示无效解决办法的更多相关文章

  1. 在iPhone手机上写了input type="date" 显示不出来的原因

    在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

  2. input时间表单默认样式修改(input[type="date"])

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  3. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  4. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  5. input type date 解决移动端显示placeholder

    在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用. 如果是这样的效果,那么客户体验是可想而知的差了. 最后 ...

  6. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  7. iphone H5 input type&equals;&quot&semi;search&quot&semi; 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  8. 手机端input&lbrack;type&equals;date&rsqb;的时候placeholder不起作用解决方案

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

  9. 关于&lt&semi;input type&equals;&quot&semi;date&quot&semi;&gt&semi;这种取值的问题 【原创】

    举例 <input type="date" id="date1"> var num = $("#date1").val(); a ...

随机推荐

  1. C&num; for循环 循环中先求长度还是使用list&period;Count,哪个效率高

    这种问法可能问的不好.应该说成是第一种方法完全没有必要,很多人可能以为那样会为代码带来效率,而实际上是不会给效率带来任何提升. 因为事实上,索引器内部,为了安全期间,还是会去求整个list的count ...

  2. VC&plus;&plus; 19 &lpar;VS2015&rpar; 编译器系统环境变量配置

    Visual C++的cl.exe编译器是微软推出的编译器,干什么的怎么用也不赘述了.大多数情况都是直接在Visual Studio里写代码然后点击"播放"按钮让Visual St ...

  3. iot表输出按主键列排序&comma;heap表不是

    <pre name="code" class="html"> create table t1 (id char(10) primary key,a1 ...

  4. Delphi使用StrToDatetime在不同操作系统出现不同的情况(控制面板的时间格式都记录在注册表里,因此也可修改注册表)

    Str:=  '2010-4-13  06:22:22'; StrToDateTime(Str); 现象:在WinXP, Win2003 都不会报错 但是在Windows7,Windows Serve ...

  5. 一起来学jquery&excl;

    jquery学习之旅!(未完待续) ------------(一)jquery书写步骤 ------------(二)jquery事件与函数 ------------(三)jquery修改css属性 ...

  6. MUI之App开发

    一般开发APP分为两种:1.原生ios和android语言开发.2.混合开发,里边穿插h5的东西. 3.第三种:现在因为前端用hbuilder工具开发的情况越来越多,这家公司又提供了更多的选择,所以近 ...

  7. springboot与springcloud的版本问题

    Spring Cloud为开发者提供了一套可以用来快速搭建分布式系统中常见模式的工具.提取主干即是Spring Cloud提供了一套工具.这些工具为开发人员提供了分布式系统下常见问题的通用解决方案.这 ...

  8. python 全栈开发,Day59&lpar;小米商城&rpar;

    一.小米商城 准备工作: 访问iconfont,官网链接: http://www.iconfont.cn/ 登录之后,找到需要的图标 将图标下载到本地,解压,重命名为font创建几个空文件夹:css, ...

  9. vs 无法启动iis

    visual studio 2013/2015/2017 有时会碰到iis无法启动, 查看系统事件日志发现,缺少 aspnetcore.dll 文件 . 下载此文件,并复制到缺少的目录中,重启visu ...

  10. bzoj1033 杀蚂蚁

    假设游戏中的蚂蚁也是按这个规则选择路线: 1.每一秒钟开始的时候,蚂蚁都在平面中的某个整点上.如果蚂蚁没有扛着蛋糕,它会在该点留下2单位的信息素,否则它会留下5单位的信息素.然后蚂蚁会在正北.正南.正 ...