<input class="baixin-quan-info-box-time" type="text" onfocus="(this.type='date')" placeholder='起始时间' v-model="tnianxian1">

先使其 type 为 text,此时支持 placeholder,当触摸或者聚焦的时候,使用 JS 切换使其触发 datepicker 功能。以上方法在ios系统会出现重复点击2次才能出时间选择器,改进方法如下:

<input :class="'l-d-box-alone-ipt'+(yy_time?' full':'')" v-model="yy_time" onfocus="(this.type='date')" placeholder="select a date" type="date">

css:
input[type="date"].full:before {
color: black;
content: ""!important;
} input[type="date"] {
direction: ltr;
}
input[type="date"]:before {
color: #A9A9A9;
content: attr(placeholder);
}
js:
$("input[type='date']").on("input", function() {
console.log($(this).val().length)
if ($(this).val().length > 0) {
$(this).addClass("full");
} else {
$(this).removeClass("full");
}
});

简单方法让input date支持placeholder(包含ios手机端方法)的更多相关文章

  1. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  2. PHP判断客户端是PC web端还是移动手机端方法

    PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...

  3. input date 对 placeholder 的支持问题

    正常情况下,text 的 input 会显示 placeholder 中的值,date 类型的 input 对其支持不好.实例代码如下: <input type="text" ...

  4. ios 手机端 input 框上方有内阴影

    解决方案 方法1: <!--如果 ui 样式里有边框,可以用外层盒子设置边框--> input{ border:none; } 方法2: //在IOS下,input 和textarea表单 ...

  5. PHP判断客户端是PCweb端还是移动手机端方法

    /** * * 根据php的$_SERVER['HTTP_USER_AGENT'] 中各种浏览器访问时所包含各个浏览器特定的字符串来判断是属于PC还是移动端 * @author discuz3x * ...

  6. css取消input、select默认样式(手机端)

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  7. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

  8. HTML5 input date 移动端 IOS 不支持问题

    1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...

  9. 手机端input[type=date]的时候placeholder不起作用解决方案

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

随机推荐

  1. 多个jar包合并成一个jar包(ant)

    https://blog.csdn.net/gzl003csdn/article/details/53539133 多个jar包合并成一个jar 使用Apache的Ant是一个基于Java的生成工具. ...

  2. spark源码本地调试

    1.前提条件: 1)安装jdk 版本: 2)安装scala 版本: 3)安装sbt 版本: 4)安装maven 5)安装git 版本: 6)安装idea,并配置好sbt.git.maven 2.从gi ...

  3. 向MySQL数据库插入数据出现乱码的情况分析

    (1)第一种情况在新建数据库时 (2)第二种情况就是,IDE环境里面配置编码设置为UTF-8 (3)第三种情况就是连接数据库时,没有设置编码.这个是最常规的.这个看起来很容易解决,但是需要注意MySQ ...

  4. [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词]

    [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词] 实用知识 use关键词 我们今天来讲讲use关键词. 1.简单来说,use是给其他方法或资源定义一个别名,然后调用者, ...

  5. Mongodb文档查询

    MongoDB 查询数据的语法格式如下: db.collection.find(query, projection) query :可选,使用查询操作符指定查询条件 projection :可选,使用 ...

  6. Web前端经典面试试题(一)

    本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案.眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端 ...

  7. MySQL内联和外联查询

    内连: 内连接是通过在查询中设置连接条件的方式,来移除查询结果集中某些数据行后的交叉连接.简单来说,就是利用条件表达式来消除交叉连接的某些数据行. 在MySQL FROM 子句中使用关键字 INNER ...

  8. Python 3标准库 第十一章 网路通信

    网路通信11.1 ipaddress  : Internet 地址 ipaddress模块提供了处理IPv4和IPv6 11.1.2  网络 CMDB  11.2  socket:网络通信 11.2. ...

  9. Struts2笔记(学struts2只需要这一篇文章)

    1.如何将struts2框架引入到web项目中      1.把struts2相关jar包引入到项目中 2.把struts2的配置文件直接放到src下面,名字要叫做struts.xml.(运行时配置文 ...

  10. 我不熟悉的list

    其实在日常中,链表的题目做的比较多,但是使用STL自带链表的还是比较少,所以里面的一些API不大熟悉.这边也简要介绍一些. 基本的一些API 先列举的这些和上面几篇用法几乎一样,所以不再累述. 赋值相 ...