• input date 对 placeholder 的支持问题


    正常情况下,text 的 input 会显示 placeholder 中的值,date 类型的 input 对其支持不好。实例代码如下:
    <input type="text" id="valid-date-search" placeholder="姓名..." >
    <input type="text" id="valid-date-search" placeholder="手机号..." >
    <input type="text" onfocus="(this.type='date')"  id="valid-date-search" datepicker="生效时间..." placeholder="生效时间..." >
    <input type="date" id="dis-valid-date-search" datepicker="失效时间..." placeholder="失效时间..." >
    

    以下为网友解释原文:
    https://zhidao.baidu.com/question/2203541163346198828.html
    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 placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
  • 相关阅读:
    python中的os
    文件系统的简单操作
    文件与目录管理
    用户与用户组管理
    基础命令的操作
    linux开机流程
    ansible源码安装、普通用户实现批量控制
    python3中得数据类型
    判断一个字符串中得大写字母,小写字母,数字出现得次数
    Elasticsearch 如何安全加固
  • 原文地址:https://www.cnblogs.com/yeyuchangfeng/p/6022017.html
Copyright © 2020-2023  润新知