效果图如下：
<!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字 清空文本框，输入内容变黑色 --> <!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->
注意事件：
1、点击焦点事件----onfouce
2、失去焦点事件----onblur
3、对于元素属性的访问，class，应该是元素名.className
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 6 <title>文本框的焦点事件</title> 7 8 <style type="text/css"> 9 /* 灰色 */ 10 .gray{ 11 color: gray; 12 } 13 14 /* 黑色 */ 15 .black{ 16 color: black; 17 } 18 </style> 19 20 </head> 21 <body> 22 <!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字 清空文本框，输入内容变黑色 --> 23 <!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 --> 24 <input type="text" id="txtSearch" class="gray" value="请输入搜索关键字" /> 25 26 <!-- 添加JS效果 --> 27 <script type="text/javascript"> 28 //获得文本框元素 29 var txtSearch=document.getElementById('txtSearch'); 30 31 //文本框得到焦点事件 onfocus() 32 txtSearch.onfocus=function(){ 33 if(this.value==='请输入搜索关键字'){//判断 34 this.className='black'; 35 this.value=''; 36 } 37 } 38 39 //文本框失去焦点事件 onblur() 40 txtSearch.onblur=function(){ 41 if(this.value.length==0){ 42 this.value='请输入搜索关键字'; 43 this.className='gray'; 44 } 45 } 46 </script> 47 </body> 48 </html>