关闭

使input date支持placeholder方法

1223人阅读 评论(0) 收藏 举报
分类:

input type date 的 placeholder 支持性有一定问题,因为浏览器会针对此类型 input 增加 datepicker 模块,看上去没那么必要支持 placeholder。

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

简单的进行了测试:

桌面端(Mac)

Safari 不支持 datepicker,placeholder 正常显示。
Firefox 不支持 datepicker,placeholder 正常显示。
Chrome 支持 datepicker,显示 年、月、日 格式,忽略 placeholder。

移动端

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

问题解决方法:

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

<input type="text" onfocus="(this.type='date')" id="" name="" placeholder="输入时间" value="2016-06-02" />


移动端点击两下才能选择日期的解决方法:

<input type="text" id="birthday" name="birthday" placeholder="请输入您的生日" />

$('#birthday').focus(function(){
    var obj = $(this);
    obj.prop('type','date');
    setTimeout(function(){obj.trigger('click');},10);
});

没填写时间时失去焦点恢复支持 placeholder

$('#birthday').blur(function(){
    var obj = $(this);
    if(!obj.val()){
        obj.prop('type','text');
    }
});


0
0
查看评论

HTML5中input为data型时不支持placeholder

最近在看Klaus Forster和Bernd Oggl著的《HTML5 Guidelines for Web Developers》,发现书中对于input元素的placeholder属性描述有疑问。书中在范例中写到 但是我在实际测试的时候发现placeholder属性在类型为date的i...
  • daruisoft
  • daruisoft
  • 2014-02-23 22:19
  • 2717

input placeholder在iOS中不显示

问题描述:input placeholder在浏览器中显示,在iOS中不显示。解决方案:input::-webkit-input-placeholder{ font-size:50px; } input{ font-size:51px;/*该处font-size大小需要大于placeholder里面...
  • tao_sheng_yi_jiu
  • tao_sheng_yi_jiu
  • 2017-12-29 14:59
  • 129

input type date 解决移动端显示placeholder.

网上找的方法苹果可以了 安卓显示总有问题. css input[type="date"]:before{     color:#A9A9A9;     content:attr(placeholder); } input[type=&q...
  • lz305263
  • lz305263
  • 2016-04-19 12:21
  • 6763

input type date 解决移动端显示placeholder.

网上找的方法苹果可以了 安卓显示总有问题. 加了段CSS就完美解决了,就是UC有点奇葩 以下是我测试的浏览器: 微信--OK. QQ浏览器--OK 谷歌浏览器--OK UC浏览器(业界奇葩),前面会有空白 css input[type="da...
  • zxf13598202302
  • zxf13598202302
  • 2016-12-09 10:14
  • 1176

type=‘date’的input标签

最近在写一个手机网页时,要求使用原生的手机时间控件。需要使用标签,之前并没有注意过type=‘date’的用法,在使用时也遇到了很多问题。在此一一总结一下: 1.首先调用浏览器自带时间控件,input的type属性有以下几种写法: type=’date’ //显示年、月、...
  • bowen11233
  • bowen11233
  • 2016-11-04 15:51
  • 3514

html5中如何去掉input type date默认样式

html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017-06-01" /> 选择时间:<input type="tim...
  • sanshipianyezi
  • sanshipianyezi
  • 2017-06-01 23:25
  • 11215

input[type='date‘]调起时间产生问题总结

①、页面默认展示的是2017/12/13 ,但实际通过value获取到的格式是2017-12-13; ②、移动端调起input[type=’date],ios上input的value默认值需设置’yyyy-mm-dd‘这样的日期格式,不能是其他字符,不然无法调起。android没有这个问题; ...
  • screaming_color
  • screaming_color
  • 2017-12-21 14:49
  • 137

HTML5表单之Input 类型- Date Pickers(日期选择器)

HTML5 拥有多个可供选取日期和时间的新输入类型: date-选取日、月、年month-选取月、年week-选取周和年time-选取时间(小时和分钟)datetime-选取时间、日、月、年(本地时间) 下面的例子允许我从日历中选一个日期: eg: Date: xxxx ...
  • u010028980
  • u010028980
  • 2013-03-29 00:33
  • 9708

使input date支持placeholder方法

input type date 的 placeholder 支持性有一定问题,因为浏览器会针对此类型 input 增加 datepicker 模块,看上去没那么必要支持 placeholder。 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式...
  • qq_16494241
  • qq_16494241
  • 2016-06-02 10:44
  • 1223

你不知道的Vue.js(相关开源项目库集合)

Vue.js库 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 ...
  • wangyongjie2017
  • wangyongjie2017
  • 2017-08-04 19:41
  • 3603
    个人资料
    • 访问:170661次
    • 积分:2243
    • 等级:
    • 排名:第19746名
    • 原创:74篇
    • 转载:6篇
    • 译文:0篇
    • 评论:13条
    文章分类
    最新评论