zoukankan      html  css  js  c++  java
  • 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">
  • 相关阅读:
    【js】replace()
    【js】indexOf()
    【js】sort()
    【js】typeof与instanceof
    【js】with 语句
    跳出框架iframe的操作语句
    Mongodb启动命令mongod参数说明
    ERROR: child process failed, exited with error number 100
    SELECT控件add方法 ie 类型不匹配
    Red hat linux ping: unknown host www.baidu.com
  • 原文地址:https://www.cnblogs.com/yeyuchangfeng/p/6022017.html
Copyright © 2011-2022 走看看