简单方法让input date支持placeholder(包含ios手机端方法)
2024-08-31 20:56:18
<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");
}
});
最新文章
- 前端工程师的PS默认工作区
- 调用天气预报webservice
- ListBox1控件
- PostgreSQL Replication之第十章 配置Slony(5)
- 《javascript高级程序设计》第四章 Variables,scope,and memory
- JSTL的全称:JSP Standard Tag Library, jsp 标准标签库
- mysql loop if
- HDOJ(HDU) 2113 Secret Number(遍历数字位数的每个数字)
- python-打印简单公司员工信息表
- TopCoder中插件的用法
- oracle_base和oracle_home 的区别
- 全文搜索 Contains 与like 的区别
- UVA - 10048 Audiophobia Floyd
- SQL游标使用及实例
- C#代码总结04---通过创建临时表DataTable进行临时编辑删除
- 微信跳转之WAP跳转微信公众号关注页面链接weixin://dl/business/?ticket=
- Python练手例子(15)
- md5之守株待兔
- mysql每组前N条
- LeetCode题解之Second Minimum Node In a Binary Tree