用JS實現文本框水印的效果

    最近做項目有一個很小的功能點，實現文本框水印效果，相信大家都比較熟悉，我用JS寫了一個比較簡單的，好了，先上圖看下效果：

 

 

   代碼實現也比較簡單，主要用到onblur和onclick。代碼如下

<script language="javascript" >

function changeColorBlack(o){
 if(o.value=="X500 Employee Search")
 o.value="";
 o.className="searchbarBlack";
 }
function changeColorGray(o)
{
 if(o.value=='')
 {
  
  o.value="X500 Employee Search";
  o.className="searchbarGray";
 }
}

</script>

<style>

  .searchbarGray{
        border:0; width:165px; height:23px; line-height:22px; padding:0 5px 0 5px; color:#c4c4c4;font-family: Arial
   }
   .searchbarBlack{
        border:0; width:165px; height:23px; line-height:22px; padding:0 5px 0 5px; color:black;font-family: Arial
   }
   .button1{
        border:0;width:76px; height:29px;color:white; font-family: Tahoma;text-align:left;cursor:hand
   } 
</style>

 <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:8px">
     <tr>
      <td>
       <input type="text"  id="searchStr"    value="X500 Employee Search"  οnblur="changeColorGray(this)"
οnclick="changeColorBlack(this)" />
      </td>
      
    </tr>
    
   </table>