手机端input[type=date]的placeholder不起作用
<div class="input clearfix">
<label class="fl">起始日期</label>
<input class="fl text_date" type="date" name="" value="" placeholder="年/月/日" />
</div>
<div class="input clearfix">
<label class="fl">终止日期</label>
<input class="fl text_date" type="date" name="" value="" placeholder="年/月/日" />
</div>
css:
input[type="date"]:before{
content: attr(placeholder);
color:#ccc;
}
用户选了日期以后我们模拟的默认文字还在,所以在用户选择的时候就删除此属性,之后需要的话再添加回来。
js:
$('.text_date').focus(function(){
$(this).removeAttr('placeholder');
});
$('.text_date').blur(function(){
if(this.value == ''){
$(this).attr('placeholder','年/月/日');
}
});
手机端input[type=date]的placeholder不起作用的更多相关文章
- 手机端input[type=date]的时候placeholder不起作用解决方案
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...
- input type date 解决移动端显示placeholder
在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用. 如果是这样的效果,那么客户体验是可想而知的差了. 最后 ...
- 关于<input type="date">这种取值的问题 【原创】
举例 <input type="date" id="date1"> var num = $("#date1").val(); a ...
- (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)
现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...
- html5中如何去掉input type date默认
html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...
- input时间表单默认样式修改(input[type="date"])
一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...
- 在iPhone手机上写了input type="date" 显示不出来的原因
在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...
- HTML5中input[type='date']自定义样式
HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...
- <input type="date">设置默认当前日期
日期选择器如下: <input type="date" id="start_date" name="start_date"> 注 ...
随机推荐
- java.net.ConnectException: Connection refused 异常
错误信息: java.net.ConnectException: Connection refused at java.net.PlainSocketImpl.socketConnect(Native ...
- angular.js学习笔记(二)
1.安装core ,shared模块 ng g m core ng g m shared 2.在shared中导入core模块 core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...
- js-day06-jQuery事件和DOM操作-练习题
jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. <button onclick="alert(1);">点我< ...
- Data Center手册(4):设计
基础架构 拓扑图 Switching Path L3 routing at aggregation layer L2 switching at access layer L3 switch融合了三种功 ...
- IIS集中化管理与编程REST API
目录 一. 简介.... 1 二. 安装.... 1 三. IIS Administration配置文件.... 2 四. Web UI管理界面.... ...
- 流媒体协议(二):RTMP协议
一.概念与摘要 RTMP协议从属于应用层,被设计用来在适合的传输协议(如TCP)上复用和打包多媒体传输流(如音频.视频和互动内容).RTMP提供了一套全双工的可靠的多路复用消息服务,类似于TCP协议[ ...
- [Swift]LeetCode57. 插入区间 | Insert Interval
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- [Swift]LeetCode451. 根据字符出现频率排序 | Sort Characters By Frequency
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
- [Swift]LeetCode915.将分区数组分成不相交的间隔 | Partition Array into Disjoint Intervals
Given an array A, partition it into two (contiguous) subarrays left and right so that: Every element ...
- QQ如何开通在线客服
一. 注册一个网站专用QQ. 二. 到QQ商家设置QQ在线状态:http://wp.qq.com/set.html 1.免费开通 2.根据你的需求设置 3,复制代码放置在html页面上即可,效果如下图