最近做项目有一个很小的功能点,实现文本框水印效果,相信大家都比较熟悉,我用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>