<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不起作用的更多相关文章

  1. 手机端input[type=date]的时候placeholder不起作用解决方案

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

  2. input type date 解决移动端显示placeholder

    在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用. 如果是这样的效果,那么客户体验是可想而知的差了. 最后 ...

  3. 关于<input type="date">这种取值的问题 【原创】

    举例 <input type="date" id="date1"> var num = $("#date1").val(); a ...

  4. (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)

    现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...

  5. html5中如何去掉input type date默认

    html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...

  6. input时间表单默认样式修改(input[type="date"])

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  7. 在iPhone手机上写了input type="date" 显示不出来的原因

    在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

  8. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  9. <input type="date">设置默认当前日期

    日期选择器如下: <input type="date" id="start_date" name="start_date"> 注 ...

随机推荐

  1. 最新版Navicat Premium12 中文破解版 安装激活

    对于PHPer 来说 Navicat Premium  简直就是神器有木有,反正我是这样觉得的,昨天刚更新了最新版本 Navicat Premium 12 ,官网是免费试用14 天的,肿么能行呢,我们 ...

  2. 【RL-TCPnet网络教程】第32章 RL-TCPnet之Telnet服务器

    第32章      RL-TCPnet之Telnet服务器 本章节为大家讲解RL-TCPnet的Telnet应用,学习本章节前,务必要优先学习第31章的Telnet基础知识.有了这些基础知识之后,再搞 ...

  3. 【转载】CSS3 文字溶解效果

    代码如下: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <ti ...

  4. Shell脚本中的for case while循环流程控制语句的使用

    shell作为一种脚本编程语言,同样包含循环.分支等其他程序控制结构,从而轻松完成更加复杂.强大的功能. 编写脚本的思路 1  明确脚本的功能 2  编写脚本时会使用到那些命令 ?   3  把变化的 ...

  5. bootstrap分页插件的使用

    项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...

  6. AI 这么优秀,连我鉴黄师的饭碗都抢了

    色情行业,或许是对信息渠道最敏锐.利用各类信息渠道进行传播最“充分”的“行业”.这些年,社交 App.直播.短视频等新的互联网应用方式,都难逃色情内容的“骚扰”.哪里人多,色情内容就能立刻扑过去,在海 ...

  7. 【MongoDb入门】15分钟让你敢说自己会用MongoDB了

    一.MongDB是什么呢,我该如何下手呢? MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 如果小伙伴你的机器上还没有安装Mon ...

  8. C++11 实现生产者消费者模式

    代码都类似,看懂一个,基本都能理解了. 共有代码: #include <cstdlib>#include <condition_variable>#include <io ...

  9. PHP分页倒序时,需要注意的问题

    PHP分页倒序请求,如果有新数据加入,下一页会出现重复数据 解决方案: 第一次查询时,给前端返回一个查询时间戳,下一次请求时,把时间戳带过来,只查询比这个时间戳小的数据

  10. IdentityServer4之Implicit(隐式许可) —— oidc-client-js前后端分离

    IdentityServer4之Implicit(隐式许可) —— oidc-client-js前后端分离 参考 官方文档:oidc-client-js:oidc-client是一个JavaScrip ...