<!doctype html> <html> <head> <meta charset="utf-8"> <title>搜索框占位符文本</title> <style type="text/css"> *{font-size:12px;} #switcher input{height:26px;width:200px;} .overlabel{position:raletive;} .overlabel label{position:absolute;top:16px;left:16px;} </style> <script src="./jquery.js"></script> <script type="text/javascript"> $(function(){ var $search=$("#search").addClass("overlabel");//虽然是给变量赋值，但是已经执行了，同时，其实执行完毕还是它本身 var $searchInput=$search.find("input"); var $searchLabel=$search.find("label"); if($searchInput.val()){ $searchLabel.hide(); } $searchInput.focus(function(){ $searchLabel.hide(); }) .blur(function(){ if($searchInput.val()==''){ $searchLabel.show(); } }); $searchLabel.click(function(){ $searchInput.trigger("focus"); }); }); </script> </head> <body> <div id="switcher"> <form id="search" method="" action="" > <label>字段的占位符文本</label> <input type="text" value="" id="txt" maxlength="150" name="txtname" /> </div> </body> </html>