关闭

使input date支持placeholder方法

632人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:112475次
    • 积分:1769
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:6篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论