解决ie不支持placeholder的问题

html5的input标签有一个很强大的placeholder属性,可是ie9以下的都不支持(包括ie9).为了解决这个问题。需要自己写js控制

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>placeholder的兼容性问题</title>
<link rel="stylesheet" href="../css/base.css" />
<style type="text/css">
.wrap{padding:200px;}
.search_box{226px;height:36px;line-height:36px;border:1px solid #ddd;}
.search_box .input_box{position:relative;}
.search_box input{float:left;border:0 none;142px;height:36px;line-height:36px;padding:0 4px;}
.search_box .btn_search{display:block;76px;height:36px;background:url('search.png') no-repeat;}
.placeholder{position:absolute;top:0;left:0;color:#999;z-index:1;}
</style>
</head>

<body>
    <div class="wrap">
        <div class="search_box">
            <div class="input_box left"><input type="text" placeholder="请输入关键字" /></div>
            <a class="btn_search right" href="javascript:void(0);" class="right"></a>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript">
var placeholder={
    _add:function(ele){
        if(!("placeholder" in document.createElement("input"))){//如果input元素不支持placeholder属性
            //alert("beign");
            var self=placeholder;
        ele.each(function(e){
                var _this=$(this),
                    attr_plac=_this.attr("placeholder");
                if(attr_plac){//存在placeholder属性
                    var e_id=_this.attr("id");
                    if(!e_id){//如果该input不存在则创建id
                        var dt=new Date();
                        e_id=="lbl_"+dt.getSeconds()+dt.getMilliseconds();
                        _this.attr("id",e_id);
                    }
                    var new_lbl=document.createElement("label");
                    new_lbl.setAttribute("for",e_id);
                    new_lbl.className="placeholder";
                    $(new_lbl).css("padding",_this.css("padding"));
                    alert(_this.css("padding"));
                    $(new_lbl).css("margin",_this.css("margin"));
                    $(new_lbl).css("line-height",_this.css("line-height"));
                    new_lbl.innerHTML=attr_plac;
                    $(new_lbl).insertBefore(_this);
                    _this.bind("focus",self._focus);
                    _this.bind("click",self._focus);
                    _this.bind("blur",self._blur);
                }
            })
        }
    },
    _focus:function(){
        var _this=$(this);
            _this.siblings("label").hide();

    },
    _blur:function(){
        var _this=$(this);
        if($.trim(_this.val()).length==0||_this.val()==_this.attr("placeholder")){
            _this.siblings("label").show();
        }
    }
}
$(function(){
placeholder._add($("input[type='text']"));
placeholder._add($("input[type='textarea']"));
})
</script>
</html>
人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
原文地址:https://www.cnblogs.com/jiaojiaome/p/4223237.html