简单方法让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 ...
随机推荐
- ubuntu16.04安装cuDNN
cudnn的安装非常简单 (1)下载安装文件 按需求下载cudnn的安装文件:https://developer.nvidia.com/rdp/cudnn-archive Tar File的下载如下图 ...
- 谈谈你对 mysql 引擎中的 MyISAM与InnoDB的区别理解?
InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISA ...
- maven私仓搭建——nexus3
maven私仓搭建——nexus3本文主要介绍maven私仓在windows下的搭建.本文主要参考:http://www.cnblogs.com/bingyeh/p/5913486.html好,下面上 ...
- python生成器并行实例
生成器并行实例: send发送值被yield接受到赋值给baozi变量 #yield作用只是在这里保存这个值的当前状态然后返回之后在调用next,又回到yield #单纯调用next不会给yield传 ...
- MySQL第二次安装随笔
找到之前的MySQL的安装包,重新安装MySQL. 1.设置环境变量,win10的可以右键此电脑-属性,在系统变量Path中添加mysql文件bin的路径 2.修改配置文件mydefault.ini( ...
- :last-child的坑-CSS3选择器
CSS3选择器之:last-child - Eric 真实经历 最近开发项目的时候发现了一个这么多年忽略的问题,和大家分享一下.项目使用的是Antd组件库,有一个搜索框是这样的: 为了保证下拉框的内容 ...
- Javascript实现图片点击弹出
一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的on ...
- 微信小程序data数组push和remove问题
因为在做一个小程序的demo时.由于不向后台请求数据,所以就涉及到对本地数据的操作,现在就做一些数组的增删 //添加新元素 addItemFn: function () { var { lists } ...
- grunt的安装及使用
windows下安装grunt需要先安装ruby和nodejsruby -v 测试ruby是否安装成功node -v 测试nodejs是否安装成功npm -v 测试npm是否安装成功(npm是node ...
- JS 跳转后保持当前参数
跳转 var data = str+"&jc=0"+ "&data=" + $("form").serialize().re ...