类型（二）"/>
事件类型（二）
事件类型（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） 当输入框失去焦点：
如果输入框值为空，提示“用户名不能为空”，并且边框颜色变为红色
如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色
效果图如下：
任务
第一步：通过元素名获取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>更多推荐
事件类型（二）
发布评论