• H5新特性 input type=date 在手机上默认提示显示无效解决办法


    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。

    那么在移动端的话,ios和安卓都是支持的,但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”,但在移动端就是一片空白了。

    移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好,很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。

    经过尝试可以设置input的 value值,但必须是日期格式才会正确显示,否则就会直接忽略掉。

    手机端type=date的时候提示不起作用解决方案

    但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。

    CSS部分

    用伪类去为input模拟一个placeholder

    手机端type=date的时候提示不起作用解决方案这样也是不够的,你会发现在用户选了日期以后我们模拟的默认文字还在。

    JS部分

    既然我们用到了placeholder属性,那么在用户选择的时候就删除此属性,之后需要的话再添加回来。

    手机端type=date的时候提示不起作用解决方案顺便说下非date类型的input设置placeholder颜色的css

    手机端type=date的时候提示不起作用解决方案

    完整代码

    手机端type=date的时候提示不起作用解决方案

    本头条号将对以后更新的文章进行归类,以方便大家阅读。比如文章的标题以Bootstrap开头,这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头,请各位客官留意。

  • 相关阅读:
    FLEX 几何学
    tcpip协议详解二知识进阶
    打造模块化的Flex应用
    java网络编程知识整理
    ActionScript实现数组快速去重算法
    Adobe Flex迷你教程 — CursorManager使用
    TCP连接中的TIME_WAIT状态二
    TCP连接中的TIME_WAIT状态
    flex 帮助文档制作(HTML)
    Intellij IDEA下flex国际化配置
  • 原文地址:https://www.cnblogs.com/leolovexx/p/5917396.html
Copyright © 2020-2023  润新知