事件类型(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>