码迷,mamicode.com
首页 > 移动开发 > 详细

手机端input[type=date]的placeholder不起作用

时间:2017-10-31 18:54:31      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:.text   fun   属性   nbsp   for   color   label   选择   focus   

     <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不起作用

标签:.text   fun   属性   nbsp   for   color   label   选择   focus   

原文地址:http://www.cnblogs.com/gxp69/p/7762539.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!