<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>placeholder</title> <style type="text/css"> .label{position: relative; display: inline-block; *zoom:1; *display: inline; *vertical-align: middle;} .label label{ position: absolute; left:0px; top:0; font-size: 12px;cursor: text; text-indent: 5px;} .label input{ padding: 9px 5px; height: 14px; line-height: normal; border: 1px solid #ccc; font-size: 14px;} </style> </head> <body> 请输入用户名： <div class="label"> <label for="user">请输入用户名</label> <input type="text" id="user" /> </div> </body> </html> <script type="text/javascript"> var aLabel=document.getElementsByTagName("label")[0]; var aInput=document.getElementsByTagName("input")[0]; aLabel.style.lineHeight=aLabel.style.height=aInput.offsetHeight+"px"; if (aInput.value.length!=0){ aLabel.style.display="none" }else{ aLabel.style.display="block" }; aInput.onfocus=function(){ aLabel.style.display="none"; } aInput.onblur=function(){ if (aInput.value.length!=0){ aLabel.style.display="none" }else{ aLabel.style.display="block"; }; } </script>
方法二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>placeholder</title> </head> <body> <input type="text" placeholder="请输入用户名" /> </body> </html> <script> function placeholder(opts){ if("placeholder" in document.createElement('input')){ return; }else{ this.obj=opts.obj; this.init(); this.focus(); this.blur(); } } placeholder.prototype.init= function(){ if (this.obj.getAttribute("placeholder") && this.obj.value.length==0){ this.obj.value=this.obj.getAttribute("placeholder"); } }; placeholder.prototype.focus=function(){ var _this=this; this.obj.onfocus=function(){ if (_this.obj.value==_this.obj.getAttribute("placeholder")){ _this.obj.value=""; }; } }; placeholder.prototype.blur=function(){ var _this=this; this.obj.onblur=function(){ if (_this.obj.value.length==0){ _this.obj.value=_this.obj.getAttribute("placeholder"); }; } }; var aInput=document.getElementsByTagName("input")[0]; new placeholder({"obj":aInput}); </script>
方法三，
背景图片，限制太多，代码就不贴上来了