简单方法让input date支持placeholder(包含ios手机端方法)
<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手机端方法)的更多相关文章
- input date 支持placeholder属性
第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能 ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{ col ...
- PHP判断客户端是PC web端还是移动手机端方法
PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...
- input date 对 placeholder 的支持问题
正常情况下,text 的 input 会显示 placeholder 中的值,date 类型的 input 对其支持不好.实例代码如下: <input type="text" ...
- ios 手机端 input 框上方有内阴影
解决方案 方法1: <!--如果 ui 样式里有边框,可以用外层盒子设置边框--> input{ border:none; } 方法2: //在IOS下,input 和textarea表单 ...
- PHP判断客户端是PCweb端还是移动手机端方法
/** * * 根据php的$_SERVER['HTTP_USER_AGENT'] 中各种浏览器访问时所包含各个浏览器特定的字符串来判断是属于PC还是移动端 * @author discuz3x * ...
- css取消input、select默认样式(手机端)
IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...
- app内嵌h5页面在ios手机端滑动卡顿的解决方法
1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%
- HTML5 input date 移动端 IOS 不支持问题
1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...
- 手机端input[type=date]的时候placeholder不起作用解决方案
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...
随机推荐
- 常用sql:按照表中的某一列对数据进行分组,统计数据条数
select FROM_UNIXTIME(start_time,'%Y-%m-%d')as date,COUNT(*) FROM random_num GROUP BY FROM_UNIXTIME(s ...
- dead relu and Tensorboard
https://medium.com/analytics-vidhya/is-relu-dead-27943b50102 1.使用relu作为激活函数时,因其在输入小于0时,输出为0,所以可能会造成d ...
- POJ 1734 无向图最小环/有向图最小环
给定一张图,求图中一个至少包含三个点的环,环上的点不重复,并且环上的边的长度之和最小. 点数不超过100个 输出方案 无向图: /*Huyyt*/ #include<bits/stdc++.h& ...
- string::erase
sequence (1) string& erase (size_t pos = 0, size_t len = npos);两个参数都有默认值,传递的唯一参数匹配第一个 character ...
- win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结
win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结 一:前提 注意:现在有两种安装的方式 1. oracle11g服务端(64位)+oracle客户端(32位)+plsql(3 ...
- Java文档查看
对于Java学习者来说,阅读Java文档是必不可少的步骤,比如我现在想知道List接口的retianAll()方法,该怎么办呢? 当然是百度了!!! 皮一下,当然是查找Java文档了,以JDK1.7版 ...
- 火焰图(Flame Graphs)的安装和基本用法
火焰图(Flame Graphs) 一.概述: 火焰图(flame graph)是性能分析的利器,通过它可以快速定位性能瓶颈点. perf 命令(performance 的缩写)是 Linux 系统原 ...
- 网络编程简介(OSI七层协议,TCP协议原理,三次握手与四次挥手)
目录 网络编程 软件开发架构 C/S架构 B/S架构 网络编程的发展史 互联网协议 1.物理连接层 2.数据链路层 3.网络层 4.传输层 5.应用层 三次握手四次挥手 三次握手建链接 数据传输 四次 ...
- Adboost几个要点分析
1.本质就是前向步进算法和加法模型,每一步计算分类器权重alpha和基分类器. 2.总体降低指数误差函数,转化为每一步降低分类误差率. 因为右边可以看作常数,所以相当于对这个进行优化 但是这一步可能做 ...
- jquery radio选择器 语法
jquery radio选择器 语法 作用::radio 选择器选取类型为 radio 的 <input> 元素.大理石平台价格表 语法:$(":radio") jqu ...