简单方法让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 ...
随机推荐
- LeetCode OJ -- 无重复字符的最长子串
给定一个字符串,找出不含有重复字符的 最长子串 的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度就是3. 给定 ...
- 关于reverse()和sort()方法的返回值问题
关于reverse()和sort()方法的返回值问题 先说结论:reverse()和sort()方法的返回值并不是当前步骤排序后的数组,而是数组的引用. 展示如下: var arr = [2, ...
- Acwing-275-传纸条(DP)
链接: https://www.acwing.com/problem/content/description/277/ 题意: 给定一个 N*M 的矩阵A,每个格子中有一个整数. 现在需要找到两条从左 ...
- 51 Nod 1134 最长递增子序列(经典问题回顾)
1134 最长递增子序列 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元 ...
- 51 Nod 1066 Bash游戏
1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到 ...
- FLASH和EEPROM的区别
FLASH和EEPROM的最大区别是FLASH按扇区操作,EEPROM则按字节操作,二者寻址方法不同,存储单元的结构也不同,FLASH的电路结构较简单,同样容量占芯片面积较小,成本自然比EEPROM低 ...
- git介绍以及一些常用命令,加上vim编辑器的简单使用
https://www.jianshu.com/p/04a6517869b4 vim:进入vim编辑器,如果后接文件名,则进入该文件的编辑模式,看图:①.vim编辑器中,按i进入编辑模式:②.按Esc ...
- [DTOJ3996]:Lesson5!(DP+拓扑+线段树)
题目描述 “最短的捷径就是绕远路,绕远路就是我最短的捷径” 转眼就$Stage\ X$了,$Stage\ X$的比赛路线可以看做一个$n$个点$m$条边的有向无环图,每条边长度都是$1$.杰洛$\cd ...
- 调用百度API写了一个js翻译小工具
目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了.效果如图: html: <!DOCTYPE html> <html lang="en"&g ...
- 生成json文件写入本地
public class Json { public static void main(String[] args) { String fullPath = null; //例如:fullPath=& ...