效果图如下：
<!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字 清空文本框，输入内容变黑色 -->
<!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->
注意事件：
1、点击焦点事件----onfouce
2、失去焦点事件----onblur
3、对于元素属性的访问，class，应该是元素名.className
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"> <title>文本框的焦点事件</title> <style type="text/css">
/* 灰色 */
.gray{
color: gray;
} /* 黑色 */
.black{
color: black;
}
</style> </head>
<body>
<!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字 清空文本框，输入内容变黑色 -->
<!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->
<input type="text" id="txtSearch" class="gray" value="请输入搜索关键字" /> <!-- 添加JS效果 -->
<script type="text/javascript">
//获得文本框元素
var txtSearch=document.getElementById('txtSearch'); //文本框得到焦点事件 onfocus()
txtSearch.onfocus=function(){
if(this.value==='请输入搜索关键字'){//判断
this.className='black';
this.value='';
}
} //文本框失去焦点事件 onblur()
txtSearch.onblur=function(){
if(this.value.length==0){
this.value='请输入搜索关键字';
this.className='gray';
}
}
</script>
</body>
</html>