事件类型（二）

深碍√TFBOYSˉ_ 2023-07-18 02:48 14阅读 0赞

# 事件类型（onfocus和onblur） #

--------------------

## onfocus事件用于： ##

*  input标签type为text、password
 *  textarea标签

--------------------

## 选择练习 1 ##

关于onfocus和onblur事件下列说法正确的是？（选择两项）

**A** onfocus和onblur事件常用在表单元素中  
**B** onfocus事件是失去焦点时触发  
**C** onblur事件是获得焦点时触发  
**D** onfocus事件是获得焦点时触发

**正确答案： A,D**  
参考解析：  
该题考察的是onfocus和onblur事件，正确选项为AD；  
这两个事件常和表单配合使用，onfocus事件是获得焦点时触发，onblur事件是失去焦点时触发。

--------------------

## 选择练习 2 ##

想要判断当输入框失去焦点时的状态，使用下列哪个事件？（选择一项）

**A** onfocus  
**B** onblur  
**C** onclick  
**D** onmouseover

**正确答案： B**  
参考解析：  
该题考察的是onblur事件，正确选项为B； onblur事件是失去焦点时触发的；  
A：onfocus是获得焦点事件。  
C：onclick是单击事件。  
D：onmouseover是鼠标经过事件。

--------------------

## 编程练习 ##

小伙伴们，根据效果图，实现下列功能：

（1） 当输入框获得焦点：  
如果输入框值为空，提示“请输入您的姓名”

（2） 当输入框失去焦点：  
如果输入框值为空，提示“用户名不能为空”，并且边框颜色变为红色  
如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色

效果图如下：  
![在这里插入图片描述][20200323181532719.png]

#### 任务 ####

第一步：通过元素名获取dom对象的方式，得到输入框对象以及放置提示文字的元素对象，并用变量进行接收

第二步：给输入框绑定获得焦点事件，当输入框获得焦点时，判断：

如果值为空，输入框后出现提示文字“请输入您的姓名”

第三步：给输入框绑定失去焦点事件，当输入框获得焦点时，判断：

（1）如果值为空，输入框后出现提示文字“用户名不能为空”，并且将样式表中的边框样式添加给输入框

（2）如果值不为空，输入框后的提示文字消失，之前加上的样式也要去掉

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>onblur和onfocus</title>
    		<style type="text/css"> .red{ border:1px solid red; } </style>
    	</head>
    	<body>
    		姓名：<input type="text"><span></span>
    		<script type="text/javascript"> var input=document.getElementsByTagName("input")[0]; var span=document.getElementsByTagName("span")[0]; input.onfocus=function(){ span.innerHTML="  请输入您的姓名"; } input.onblur=function(){ if(this.value==""){ this.className="red"; span.innerHTML="  用户名不能为空"; } else{ this.removeAttribute("class"); span.innerHTML=""; } } </script>
    	</body>
    </html>

[20200323181532719.png]: /images/20230528/7bf8b75c078b4d1e8c77defb9d70fd6d.png