[DIV+CSS] 实现搜索框点击时提示文字消失 离开时提示文字出现

[复制链接]
该例为一个搜索框,点击搜索框后默认提示文字自动清除,离开再次显示默认提示文字
  1. <html>
  2. <body>
  3. <meta charset="utf-8" />
  4. <title>CSS搜索框</title>
  5. <style type="text/css">
  6.     .searchinput{
  7.     border-right-width: 0px;
  8.     padding-left: 3px;
  9.     width: 168px;
  10.     font-family: arial;
  11.     float: left;
  12.     border-top-width: 0px;
  13.     border-bottom-width: 0px;
  14.     color: #636365;
  15.     margin-left: 4px;
  16.     font-size: 8pt;
  17.     vertical-align: middle;
  18.     border-left-width: 0px;
  19.     margin-right: 3px;
  20.     }
  21.     .tab_search{
  22.     border-bottom: #cccccc 1px solid;
  23.     border-left: #cccccc 1px solid;
  24.     height: 25px;
  25.     border-top: #cccccc 1px solid;
  26.     border-right: #cccccc 1px solid;
  27.     }
  28.     .searchaction{
  29.     width: 28px;
  30.     float: left;
  31.     height: 21px;
  32.     font-size: 14px;
  33.     padding: 1px 1px 1px 1px ;
  34.     }
  35. </style>
  36. <form action="#" name="search">
  37.     <table border="0" cellpadding="0" cellspacing="0" class="tab_search">
  38.         <tr>
  39.         <td>
  40.             <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="请输入商家名称地址" />
  41.         </td>
  42.         <td>
  43.         <input type="submit" value="ok" width="21" height="17" class="searchaction" />
  44.         </td>
  45.         </tr>
  46.     </table>
  47. </form>

  48. </body>
  49. </html>
复制代码

实现点击清除 离开回来效果 重点在于:
  1. <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="请输入商家名称地址" />
复制代码


回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源