javascript实现搜索文本框效果

   搜索文本框的效果主要是具有默认的value，获得焦点时将清除默认的value。失去焦点时，如果文本框中有值则显示当前值，如果没有值则文本框中的value恢复成默认。此效果主要使用的是onfocus事件和onblur事件，即当获得焦点时发生的事件和失去焦点时发生的事件。下面请看代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>无标题页</title>
 5    <script type="text/javascript">
 6      function inputOnfocus(){
 7       var keyWords=document.getElementById("keyWords");
 8       if(keyWords.value="请输入关键字"){
 9        keyWords.value="";
10        keyWords.style.color="Black";
11       }
12      }
13      
14      function inputOnblur(){
15       var keyWords=document.getElementById("keyWords");
16       if(keyWords.value.length<=0){
17        keyWords.value="请输入关键字";
18        keyWords.style.color="Gray";
19       }
20      }
21    </script>
22 </head>
23 <body>
24 <input type="text" id="keyWords"value="请输入关键字" onfocus="inputOnfocus()" onblur="inputOnblur()"  style="color:Gray"/>
25 </body>
26 </html>

此例子比较简单，适合初学者，所以不细细评讲。

posted @ 2012-05-29 23:57  孙进  阅读(1832)  评论(0)  编辑  收藏  举报