手机端input[type=date]的时候placeholder不起作用解决方案
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。
那么在移动端的话,ios和安卓都是支持的,但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”,但在移动端就是一片空白了。
移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好,很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。
经过尝试可以设置input的 value值,但必须是日期格式才会正确显示,否则就会直接忽略掉。
1
|
<input type="date" value="2012-05-10" id="date">
|
但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。
CSS部分
用伪类去为input模拟一个placeholder
1
2
3
4
|
input[type="date"]:before{
content: attr(placeholder);
color:red;
}
|
这样也是不够的,你会发现在用户选了日期以后我们模拟的默认文字还在。
JS部分
既然我们用到了placeholder属性,那么在用户选择的时候就删除此属性,之后需要的话再添加回来。
1
2
3
4
5
6
7
|
var o = document.getElementById('date');
o.onfocus = function(){
this.removeAttribute('placeholder');
};
o.onblur = function(){
if(this.value == '') this.setAttribute('placeholder','我是日期');
};
|
顺便说下非date类型的input设置placeholder颜色的css
1
2
3
|
::-webkit-input-placeholder {
color:red;
}
|
手机端input[type=date]的时候placeholder不起作用解决方案的更多相关文章
- 手机端input[type=date]的placeholder不起作用
<div class="input clearfix"> <label class="fl">起始日期</label> &l ...
- 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"> 注 ...
随机推荐
- OpenCV 2.4.11 VS2012 Configuration
Add in the system Path: C:\opencv\build\x86\vc11\bin; Project->Project Property->Configuration ...
- thinkphp中文验证码不能显示的问题
使用tp框架里的验证码,数字验证码能很好的显示出来,下面是实现的函数 function verify(){ import("ORG.Util.Image"); return Ima ...
- Excel中如何在两个工作表中查找重复数据
有时我们可能会在两种工作表中查找重复记录,当数据记录很多时,就必须通过简单的方法来实现.下面小编就与大家一起分享一下查看重复记录数据的方法,希望对大家有所帮助. 方法/步骤 为了讲解的需要,小编特 ...
- PHP 支持中文目录和文件的的遍历:文件编码转换
在使用 readdir() 遍历指定目录时,使中文目录和文件名都正常显示需要使用 iconv() 进行文件编码转换: <?php header("Content-type:text/h ...
- jQuery 复合选择器的几个例子
<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js Author:博客园小dee --> 一. 复合选择器对checkbox的相关操作 1 <inp ...
- [收藏] 关于解决“进程com.android.phone意外停止”的方法 (未尝试)
很多机油反应有这个情况,本人费劲九牛20虎之力终于克服之,这个现象一般出现在刚刷完系统会出现,甚至你怎么刷ROM这个现象依旧存在(崩溃不?)~~~有位机油刷了这个系统也出现了http://samsun ...
- MVC @functions
asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们 ...
- Behavior-Based Intelligence
Computer Science An Overview _J. Glenn Brookshear _11th Edition Early work in artificial intelligenc ...
- 2认识HTML中的“ML”:深入理解超文本
HTML是描述网页结构的标记语言(即HTML中的'ML'),而HT指把一个网页链接到其他网页. <a>元素可以创建超文本链接到另外一个网页,<a>元素中的内容在网页中是可点击的 ...
- (转)android 在电脑上显示真机屏幕
http://my.oschina.net/u/202293/blog/199954 方法一: 可以用360手机助手等实现. 方法二: 想把手机屏幕显示在电脑屏幕上时就需要使用Android Scre ...