H5新特性 input type=date 在手机上默认提示显示无效解决办法
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。
那么在移动端的话,ios和安卓都是支持的,但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”,但在移动端就是一片空白了。
移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好,很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。
经过尝试可以设置input的 value值,但必须是日期格式才会正确显示,否则就会直接忽略掉。
但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。
CSS部分
用伪类去为input模拟一个placeholder
这样也是不够的,你会发现在用户选了日期以后我们模拟的默认文字还在。
JS部分
既然我们用到了placeholder属性,那么在用户选择的时候就删除此属性,之后需要的话再添加回来。
顺便说下非date类型的input设置placeholder颜色的css
完整代码
本头条号将对以后更新的文章进行归类,以方便大家阅读。比如文章的标题以Bootstrap开头,这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头,请各位客官留意。
转载于:https://www.cnblogs.com/leolovexx/p/5917396.html
H5新特性 input type=date 在手机上默认提示显示无效解决办法相关推荐
- html5手机端设置date,H5 input[type='date'] 优化 pc端和移动端的使用
标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, ...
- html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
- 前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
- h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
- H5自带的type=date或者month等日期控件移动端显示placeholder
H5自带的type=date或者month等日期控件移动端placeholder会无法显示 解决方法: html部分 <li class="info-item select-item& ...
- H5新特性 - 新增标签
新增的语义标签 标签语义化 旨在让标签有自己的含义,见名知义 优势 代码结构清晰,方便阅读,有利于团队开发(开发效率提高) 方便其他设备解析(屏幕阅读器,盲人阅读器)以语义的方式来渲染页面 有利于搜索 ...
- 前端面试题二:ES6/7/8新特性、性能优化、数据交互、H5新特性
目录 一.ES6/7/8新特性 二.性能优化 三.数据交互 四.H5新特性 一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
- 【面试】面试官:说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
- H5新特性(一)——音视频标签
H5新特性--音视频标签 大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
最新文章
- 电大计算机考试打开画图程序,最新国家开放大学电大《计算机绘图》形考任务网考试题及答案.pdf...
- 主宰全球的10大算法
- 第 28 小时项目管理过程实践和案例分析
- 人工智能 | 自然语言处理研究报告(概念篇)
- new 实例化对象是啥意思_二. 初步认识JS中的类和对象
- C++之手写strlen函数
- vbs隐藏cmd命令窗口调用bat程序执行class
- 求二叉树中结点个数代码java_求二叉树中第K层结点的个数
- mongodb转实体对像_MongoDB:实体对象(javabean)转DBObject
- 劳荣枝潜逃 23 年落网,多亏了它!
- Nginx做反向代理和负载均衡时“X-Forwarded-For”信息头的处理
- React [Umi] history(API) 路由监听
- 佳能lbp611cn硒鼓_佳能lbp611cn说明书
- android+rom+bootloader+flash,【极光ROM】-【三星NOTE10/NOTE10+/5G N97XX-9825】-【V9.0 Android-R-UA1】...
- 计算机硬盘改回基本磁盘,将动态磁盘更改回基本磁盘
- 「BZOJ1597」[Usaco2008 Mar] [TYWZOJ1482] 土地购买
- 微信支付跨平台软件架构
- 2. Instructions: Language of the computer
- Java实现仿win10计算器——微升级版
- 分享一个颜色渐变的网站
热门文章
- was web 服务器性能测试,was web 服务器性能测试
- Linux ibm mq 教程,IBM MQ 使用指南
- sprintf php 数字占位,PHP sprintf()实现格式化输出
- php curl post 文件_php curl文件上传$_FILES为空,只有$_POST有值,如何兼容php5.0~5.6各版本...
- mysql创建临时表 分页_ASP+MySQl利用临时表分页第一页数据正常,下一页往后没有数据...
- KVM Vhost-net 和 Virtio-net代码详解(十八)
- linux存储--共享内存机制shm(十三)
- linux虚拟网络设备之veth(二)
- html模板存储在mysql_Python爬虫架构5模板 | 你真的会写爬虫吗?
- ASP.NET 2.0 正式版中无刷新页面(客户端回调)的开发