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 功能。
<
input
placeholder="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
- input type=date 的兼容性等问题
- 更改input type=“date”等元素的默认样式
- html中input标签type=date 的赋值问题
- type=‘date’的input标签
- input[type='date‘]调起时间产生问题总结
- 获取 input[type=date]的值value
- input[type="date"]默认样式修改
- input[type=date]默认样式修改
- input[type="date"]默认样式修改
- <input type="hidden">的问题
- HTML中INPUT type="date"标签如何赋值注意问题
- 基于chromium24的HTML5特性实现(input type = week date datetime datetimelocal month time)
- input type=date 的使用总结(onchange 及 min max)
- javascript验证html5自带input type="date"用户输入日期过期的方法
- 时间戳赋值给input type=date的标签上
- 手机端时间选择器慢input type="date"
- h5 input type=date 怎么进行赋值(回显)
- js有关input type=date传值类型
- 2. SpringMVC常用注解说明
- 复习一下src与background的区别
- Android Studio com.android.dex.DexException: Multiple dex files define/xxx/xxx/xxx
- 2 判断
- 两个栈实现队列
- input type=date 的兼容性等问题
- ExtJS使用Form提交数据
- 一些零碎的小积累
- mtk lcd调试
- redis
- CorelDRAW X8系统要求
- JavaScript脚本控制HTML实例之旋转
- Make America Great Again
- angularJS 路由跳转(带参数)