1、placeholder 问题解决方法

对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placeholder 文字,但是为了统一表单外观,往往需要显示。Android 部分机型没有 date 也不会显示 placeholder 文字。

解决方法:

先使其 type 为 text,此时支持 placeholder,当触摸或者聚焦的时候,使用 JS 切换使其触发 datepicker 功能。

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

  但是在iphone 4s 上点击选择过后,还是有小问题,样式依然是默认样式,正在寻求解决方法。

这次解决方法借鉴http://www.w3cmark.com/2015/405.html

等找到好的方法,再补充。

HTML5 input date 移动端 IOS 不支持问题的更多相关文章

  1. HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)

    不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...

  2. 使用 HTML5 input 类型提升移动端输入体验(键盘)

    在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...

  3. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  4. 使用 HTML5 input 类型提升移动端输入体验(转翻译)

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  5. 使用 HTML5 input 类型提升移动端输入体验

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  6. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  7. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  8. HTML5 INPUT新增属性

    HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下i ...

  9. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

随机推荐

  1. web常见测试点总结

    上周五小组内对Web的常见测试点进行了交流学习,虽然这些信息网上一搜都一大把,但整理的过程中自己脑袋瓜里又重新回顾了一遍,大家都很认真的在学习,互相补充着,现总结如下,欢迎同行留言 一.新增.修改 用 ...

  2. python 16 进程和线程

    进程和线程 很多同学都听说过,现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务. ...

  3. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

  4. 使用PIE对IE6、7、8进行CSS3兼容介绍和经验总结

    下面说说如何对 IE10 以下版本的浏览器进行部分 CSS3 兼容 国外团队开发的兼容插件,去年做项目时才发现,非常强大 主角:PIE.js ,  PIE.htc    两种方法可以实现 官方网站:h ...

  5. Linux常用操作命令介绍

     Linux常用操作命令介绍 重要概念 CPU:就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令:cat /proc/cpuinfo 内存:大脑中的记忆区块,将皮肤.眼睛等所收集到的信 ...

  6. 重启部署在Linux系统下的tomcat服务

    重启部署在Linux系统下的tomcat服务具体的操作步骤: 1.在Winscp上建立连接,输入用户和密码,这个密码一般是看不到的: 2.查看服务:ps -ef  |  gerp  Java  注意在 ...

  7. Session有什么重大BUG,有什么方法可以解决

    [考点]ASP.NET中Session的多种保存方法.[出现频率]★★★☆☆[解答]使用进程内会话状态模式时,如果aspnet_wp.exe或应用程序域重新启动,则会话状态数据将丢失.可以用Sate ...

  8. 【小程序报错】 TLS 版本必须大于等于 1.2

    服务器是windows 2008 server 环境是IIS7SSL是申请用的阿里免费.微信小程序发现wx.request,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 直接说解决办法吧 ...

  9. IntelliJ IDEA详细配置和使用教程(转)

    http://blog.csdn.net/m_m254282520/article/details/78900238 关闭Intellij IDEA自动更新 在File->Settings-&g ...

  10. Python介绍以及Python环境搭建

    Python介绍以及Python环境搭建 1.Python 发展历史 Python是由Guido van Rossum在八十年代末和九十年代初,在荷兰国家数学和计算机科学研究所设计出来的,据说是在圣诞 ...