<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. Charles中使用Map Local提高测试效率

    书接上回,上次说到Charles中可以使用修改返回值来模拟接口返回,这次我们来说一下Charles中另外一个强大的功能. 我们用手机连接Charles,具体可以参考上一篇<借助Charles来测 ...

  2. java序列化和反序列化及序列化方式

    平时我们在Java内存中的对象,是无 法进行IO操作或者网络通信的,因为在进行IO操作或者网络通信的时候,人家根本不知道内存中的对象是个什么东西,因此必须将对象以某种方式表示出来,即 存储对象中的状态 ...

  3. 2019ICPC沈阳网络赛-D-Fish eating fruit(树上DP, 换根, 点分治)

    链接: https://nanti.jisuanke.com/t/41403 题意: State Z is a underwater kingdom of the Atlantic Ocean. Th ...

  4. chr ord 去重

    找不同字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. def func(s, t): num1 = 0 num2 = 0 for i in s: nu ...

  5. prometheus 标签修改promSQL

    relabel_configs 根据prometheus 监控k8s配置文件中学习 未修改前默认配置文件: 网页显示: 修改配置文件后: 网页显示: 服务发现网页: 总结: 在数据采集之前对任何目标的 ...

  6. C# Winform程序之间如何传递和接收参数 Process

    Program: static class Program    { /// <summary>         /// 应用程序的主入口点.         /// </summa ...

  7. Python天天学_03_基础三

    Python_day_03 金角大王: http://www.cnblogs.com/alex3714/articles/5740985.html ------Python是一个优雅的大姐姐 学习方式 ...

  8. sql in条件 超过1000字符的处理方法

    private string getOracleSQLIn(string[] ids, string field) { int count = Math.Min(ids.Length, 1000); ...

  9. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  10. ltelliJ IDEA 创建Maven web项目无src目录的解决方案

    https://blog.csdn.net/xiaoke815/article/details/72810976 一.缘由 这几天闲来无事,突然想试试IDEA这个编译器,之前一直都在用Eclipse ...