事件类型(二)

本文介绍了HTML中的onfocus和onblur事件,主要用于表单元素。onfocus事件在元素获得焦点时触发,而onblur事件在元素失去焦点时触发。文章通过选择题和编程练习帮助读者理解并应用这两个事件。
摘要由CSDN通过智能技术生成

事件类型(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对象的方式,得到输入框对象以及放置提示文字的元素对象,并用变量进行接收

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

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

第三步:给输入框绑定失去焦点事件&

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值