ieがplaceholderをサポートしていない問題を解決する

10462 ワード

プレイスホルダ

html 5のinputタグには強力なplaceholder属性があるが、ie 9以下はサポートされていない(ie 9を含む).この問題を解決するために.自分で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{width:226px;height:36px;line-height:36px;border:1px solid #ddd;}

.search_box .input_box{position:relative;}

.search_box input{float:left;border:0 none;width:142px;height:36px;line-height:36px;padding:0 4px;}

.search_box .btn_search{display:block;width: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>

jsでブラウザタイプを判断する

カスタムセクタグラフ、内部ネストされた折れ線、点