HTML5 input date 移动端 IOS 不支持问题

Posted 2020-07-07 JeremyLee87

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

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