<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. Go语言标准库之fmt.Scan

    Go语言fmt.Scan使用指南 本文介绍了Go语言中fmt包中从标准输入获取数据的的Scan系列函数.从io.Reader中获取数据的Fscan系列函数以及从字符串中获取数据的Sscan系列函数的用 ...

  2. Mac下的LDAP客户端 ApacheDirectoryStudio

    mac下的ldap browser,最开始下载的最新版本的 地址 http://directory.apache.org/studio/downloads.html 使用的时候经常卡死,尝试下载老版本 ...

  3. 利用nethogs查看哪些进程占用网络带宽

    一.安装nethogs centos6版本安装: 1.安装依赖包 [root@hlsms-fensheng- ~]# yum install ncurses* 已加载插件:fastestmirror, ...

  4. 【CF 482E】ELCA

    题意 题解 50pts 由于这题 \(2s\),所以可以信仰一波,暴力修改.查询. 暴力修改的复杂度是 \(O(n)\),暴力查询的复杂度是 \(O(n^2)\). 但不难发现可以通过记录子树大小来优 ...

  5. 在table中加入<hr />标签为什么横线会跑到上边?

    这是我今天在写页面的时候发现的一个问题,万能的百度已经帮我找到答案啦!!!在此分享给你们吧 table>[caption|thead>tr|tbody>tr]>[th|td] ...

  6. CPU性能指标

    1,主频 主频 = 时钟频率,它是指CPU内部晶振的频率,常用单位为MHz,它反映了CPU的基本工作节拍; 时钟频率又称主频,它是指CPU内部晶振的频率,常用单位为MHz,它反映了CPU的基本工作节拍 ...

  7. Http请求Response Code含义

    http状态返回代码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码.100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分.101 ...

  8. Python语法汇总

    如果你之前学过任何一门编程语言,因为每种语言的基础语法要做的事情其实基本是相同的,只是表示方式或某些地方稍稍不同,因此在学Python的时候将它与其它你已经掌握的编程语言对比着学,这样学起来更快,效果 ...

  9. [人物存档]【AI少女】【捏脸数据】少(烧)女前(钱)线

    点击下载(城通网盘):9.zip 点击下载(城通网盘):AISChaF_20191112224605286.png

  10. Travis CI eval ./gradlew assemble 错误

    问题 在进行 Travis CI 进行集成编译的时候出现错误. <-------------> 0% WAITINGThe command "eval ./gradlew ass ...