search tip 问题

Question

下面代码是一个搜索框代码， 
我想实现如下功能
1。默认在搜索框里显示 “Enter product”， 这时CSS CLASS 为srch-query-boxNew
2。 输入关键字后， 搜索框显示关键字 ，这时CSS CLASS 为srch-query-boxNew_hightlight
3。 用户正在输入关键字时， 这时CSS CLASS 为srch-query-boxNew_hightlight
 <div id="searchbox">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:11px;">
         <tr>
           <td width="13%" align="left"><strong style="font-size:15px;">Search</strong></td>
           <td width="46%"><input type="text" value="Enter product" onfocus="onSearchFocus(this);" 
           onblur="onSearchBlur(this)" onmouseout="changeClass(this)" onmousemove="changeClass(this)" class="srch-query-boxNew"/></td>
           <td width="6%" align="center"><input name="" type="radio" value="" checked="checked" /></td>
           <td width="12%" align="left"> Product Keywords</td>
           <td width="6%" align="center"><input name="" type="radio" value="" /></td>
           <td width="10%" align="left">Product Number</td>
           <td width="7%"><img src="images/icon_search.gif" /></td>
         </tr>
       </table>
     </div><style>
<!--
.srch-query-boxNew {
border:1px solid #ccc; width:96%; padding:3px; font-size:10px; color:#999;
}
.srch-query-boxNew_hightlight {
border:1px solid #427DC7; width:96%; padding:3px; font-size:10px; color:#000;
}
-->
</style><script type="text/javascript">    function onSearchFocus(obj) {
     if(obj.value=='Enter product') {
     obj.value=''
          } 
    }    function onSearchBlur(obj) {     if(obj.value =='') {
     obj.value='Enter product';
     changeClass(obj);
          }
    }    function changeClass(q){
     (q.className=="srch-query-boxNew")?q.className="srch-query-boxNew_hightlight":q.className="srch-query-boxNew";
    } 
</script>

Answer 1

js: function onSearchFocus(obj) {
if (obj.value == 'Enter product') {
obj.value = ''
}
} function onSearchBlur(obj) { if (obj.value == '') {
obj.value = 'Enter product';
}
changeClass(obj);
} function changeClass(q) {
if (q.value != 'Enter product') {
q.className = "srch-query-boxNew_hightlight";
} else {
q.className = "srch-query-boxNew";
}
} 
html:<div id="searchbox">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:11px;">
<tr>
<td width="13%" align="left"><strong style="font-size:15px;">Search</strong></td>
<td width="46%"><input type="text" value="Enter product" onfocus="onSearchFocus(this);" 
onblur="onSearchBlur(this)" class="srch-query-boxNew"/></td>
<td width="6%" align="center"><input name="" type="radio" value="" checked="checked" /></td>
<td width="12%" align="left"> Product Keywords</td>
<td width="6%" align="center"><input name="" type="radio" value="" /></td>
<td width="10%" align="left">Product Number</td>
<td width="7%"><img src="images/icon_search.gif" /></td>
</tr>
</table>
</div>

Answer 2

有很多 if (q.value != 'Enter product')， 能优化一下吗 

Answer 3

刷新以后CSS 控制就没有效果了