搜索框点击时提示文字消失 离开时提示文字出现
该例为一个搜索框，点击搜索框后默认提示文字自动清除，离开再次显示默认提示文字
<html>
<body>
<meta charset="utf-8" />
<title>CSS搜索框</title>
<style type="text/css">
.searchinput{
border-right-width: 0px;
padding-left: 3px;
width: 168px;
font-family: arial;
float: left;
border-top-width: 0px;
border-bottom-width: 0px;
color: #636365;
margin-left: 4px;
font-size: 8pt;
vertical-align: middle;
border-left-width: 0px;
margin-right: 3px;
}
.tab_search{
border-bottom: #cccccc 1px solid;
border-left: #cccccc 1px solid;
height: 25px;
border-top: #cccccc 1px solid;
border-right: #cccccc 1px solid;
}
.searchaction{
width: 28px;
float: left;
height: 21px;
font-size: 14px;
padding: 1px 1px 1px 1px ;
}
</style>
<form action="#" name="search">
<table border="0" cellpadding="0" cellspacing="0" class="tab_search">
<tr>
<td>
<input type="text" name="q" title="Search" class="searchinput" id="searchinput" value="请输入商家名称地址" onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='请输入商家名称地址';" onfocus="if(this.value=='请输入商家名称地址')value='';" value="请输入商家名称地址" />
</td>
<td>
<input type="submit" value="ok" width="21" height="17" class="searchaction" />
</td>
</tr>
</table>
</form>
</body>
</html>
实现点击清除 离开回来效果 重点在于：
<input type="text" name="q" title="Search" class="searchinput" id="searchinput" value="请输入商家名称地址" onkeydown="if (event.keyCode==20) {}" onblur="if(this.value=='')value='请输入商家名称地址';" onfocus="if(this.value=='请输入商家名称地址')value='';" value="请输入商家名称地址" />特别补充：html5也可以直接实现类似功能
具体请参考我的另一篇博文 《HTML5轻松实现搜索框提示文字点击消失—及placeholder颜色的设置》
http://blog.csdn.net/pspgbhu/article/details/51465514