用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>

发布了27 篇原创文章 · 获赞 7 · 访问量 4万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章