input type=date 的兼容性等问题

来源:互联网 发布:数据分析师考试网 编辑:程序博客网 时间:2024/04/29 22:48

HTML5 input date 移动端 IOS 不支持问题(不支持显示是:默认的样式是年/月/日然后是有上下小三角的箭头。

桌面端(Mac)

    Safari 不支持 datepicker,placeholder 正常显示。

    Firefox 不支持 datepicker,placeholder 正常显示。

    Chrome 支持 datepicker,显示 年、月、日 格式,忽略 placeholder。

移动端

    iPhone5 iOS7 有 datepicker 功能,但是不显示 placeholder。

    Andorid 4.0.4 无 datepicker 功能,不显示 placeholder


从上面可以看出,iOS 上会有 date 不会显示 placeholder 文字,Android 部分机型没有 date 也不会显示 placeholder 文字。但是为了统一表单外观,往往需要显示。

解决方法:

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

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


还有个解决方法:先删除他的placeholder的属性再添加上。

$(input[type='date']).bind({

focus:function(){$(this).removeAttr("placeholder")}

blur:function(){ if($(this).val()==''){ $(this).attr("placeholder","日期的默认值")}

})


0 0
原创粉丝点击