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>