<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. linux chattr:配置文件隐藏属性;lsattr:显示文件属性

    1    chattr [+-=][ASadistu] 文件或目录名称 选项与参数: + :在原有参数设定基础上,追加参数.- :在原有参数设定基础上,移除参数.= :更新为指定参数设定.A:文件或目 ...

  2. 架构师成长之路5.4-Saltstack配置管理(LAMP架构案例)

    点击架构师成长之路 架构师成长之路5.4-Saltstack配置管理(LAMP架构案例) 配置管理工具: Pupper:1. 采用ruby编程语言:2. 安装环境相对较复杂:3.不支持远程执行,需要F ...

  3. 标准C语言(7)

    函数调用过程中通常伴随着两个函数之间的数据传递.数据传递存在两个完全相反的方向(可以从调用函数,向被调用函数传递数据也可以从被调用函数向,调用函数传递数据),任意方向的数据传递都使用被调用函数提供的存 ...

  4. oracle 清空当前用户所有对象

    BEGIN FOR REC IN (SELECT OBJECT_NAME,OBJECT_TYPE FROM USER_OBJECTS WHERE OBJECT_TYPE='PROCEDURE' OR ...

  5. 【转载】Stanford CoreNLP Typed Dependencies

    总结自Stanford typed dependencies manual 原文链接:http://www.jianshu.com/p/5c461cf096c4 依存关系描述句子中词与词之间的各种语法 ...

  6. POJ3311Hie with the Pie(floyd传递+DP,状态压缩)

    问题 The Pizazz Pizzeria prides itself in delivering pizzas to its customers as fast as possible. Unfo ...

  7. Socket的通信机制?

    套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议 ...

  8. 本机的IP地址无法打开(Vue项目)

    1, 首先找到使用vue脚手架建立项目config文件中的index.js文件2, 修改dev里面的host属性值:改成 host: ‘0.0.0.0’3, 最后在局域网下,使用自己的ip进行连接,同 ...

  9. C# 数据测试

    查询 100w条数据   39列 把100w条数据转换为匿名对象 加入到集合  所用的时间是 32 s 39列 600万条数据

  10. Windows Server 快速生成免费SSL证书 (letsencrypt)

    最近官网需求部署个SSL证书,一番操作后把借鉴的网站与实际过程记录下来 Let's Encrypt,官网是https://letsencrypt.org/,它是一个由各大公司赞助的公益组织: 有趋势有 ...