JavaScript文本框焦点事件

效果图如下：

<!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字  清空文本框，输入内容变黑色 -->
<!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->

 

注意事件：

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>

 

posted @ 2019-01-07 17:20  笑苍茫  阅读(2568)  评论(0)  编辑  收藏  举报