<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. ES6新增对象方法的访问描述符:get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  2. ABP入门系列(4)——创建应用服务

    ABP入门系列目录--学习Abp框架之实操演练 一.解释下应用服务层 应用服务用于将领域(业务)逻辑暴露给展现层.展现层通过传入DTO(数据传输对象)参数来调用应用服务,而应用服务通过领域对象来执行相 ...

  3. Java中的线程协作之Condition

    一.Condition接口 1.Condition接口的常用方法介绍 /** * 已经获取到锁的线程调用该方法会进入等待状态,知道其他持有锁的线程通知(signal)等待队列中的线程或者被中断退出等待 ...

  4. 获取安卓应用APK包名的方法

    应用商店按照符合Android标准的原则进行设计,使用包名(Package Name)作为应用的唯一标识.即:包名必须唯一,一个包名代表一个应用,不允许两个应用使用同样的包名.包名主要用于系统识别应用 ...

  5. ansible基础-roles

    一 简介 注:本文demo使用ansible2.7稳定版 在我看来,role是task文件.变量文件.handlers文件的集合体,这个集合体的显著特点是:可移植性和可重复执行性. 实践中,通常我们以 ...

  6. [Swift]LeetCode165. 比较版本号 | Compare Version Numbers

    Compare two version numbers version1 and version2.If version1 > version2 return 1; if version1 &l ...

  7. [Swift]LeetCode215. 数组中的第K个最大元素 | Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  8. [Swift]LeetCode964. 表示数字的最少运算符 | Least Operators to Express Number

    Given a single positive integer x, we will write an expression of the form x (op1) x (op2) x (op3) x ...

  9. 还在使用SimpleDateFormat?你的项目崩没?

    如果是在多线程环境下,就需要注意了. 要点: 1.加Synchronized同步: 2.使用ThreadLocal: 3.jdk8使用DateTimeFormatter替代SimpleDateForm ...

  10. vue实例属性的方法

    1.$mount()   手动设置挂载点  eg:vm.$mount("#app") 2.$destroy()  销毁   eg:vm.$destroy(); 3.$forceUp ...