js焦点处理的几种方式

js焦点处理的几种方式,表单焦点处理和容器焦点处理，常用于文本框获取焦点时调用函数和失去时调用函数，div点击弹出层，当失去焦点时候隐藏层等问题处理。javascript焦点处理，很好的解决了此类问题。

1️⃣ 表单焦点处理

这里拿文本框获取焦点时，背景变色，失去焦点时回复原色，并判断是否输入正确举例。

1.1 当成焦点时（focus）

onfocus 当成焦点时，改变背景颜色，文字颜色

1

1.2 当失去焦点时（blur）

onblur 当失去焦点时，回复背景颜色和文字颜色

1

效果

源码，直接复制使用

	



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---

2️⃣ 容器焦点处理

    这里以单击按钮出现菜单，失去焦点时候隐藏菜单举例。

2.1 根据ID处理焦点

id为rep1

if (target.closest("#rep1").length == 0) {//点击id为parentId之外的地方触发
	document.getElementById("dropdiv").style.display = "none";
}
1
2
3

2.2 根据class处理焦点

class为testclass

if (target.closest(".testclass").length == 0) {//点击id为parentId之外的地方触发
	document.getElementById("dropdiv").style.display = "none";
}
1
2
3

效果图

代码示例，直接复制使用

	

	
		xcLeigh
	
	
	

		

			html好看的邀请函
		
		

			html好看的个人简历
		
		

			html好看的爱情表白
		
	



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

---

优质资源分享

🧡🧡🧡🧡🤍【总览】程序员前端、后端资源合集

🧡🧡🧡🧡🤍【源码】程序员优质资源汇总

🧡🧡🧡🧡🤍【博主推荐】JAVA SSM框架的后台管理系统（附源码）

🧡🧡🧡🧡🤍【博主推荐】SpringBoot API接口对数据库增删改查,路由,TOKEN,WebSocket完整版(附源码)

🧡🧡🧡🧡🤍【博主推荐】HTML制作一个美观的个人简介网页（附源码）

🧡🧡🧡🧡🤍【博主推荐】html好看的个人简历网页版(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的个人主页(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的邀请函(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的音乐播放器(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的拼图小游戏(附源码)

🧡🧡🧡🤍🤍【博主推荐】html好看的拼图验证码(附源码)

🧡🧡🧡🧡🧡【博主推荐】html界面绘制SVG图形(附源码)

🧡🧡🧡🧡🤍【博主推荐】html操作SVG图(附源码)

🧡🧡🧡🧡🤍【博主推荐】html下拉框树形（附好看的登录界面）

🧡🧡🧡🧡🤍【博主推荐】HTML5响应式手机WEB(附源码)

🧡🧡🧡🧡🤍【博主推荐】大数据可视化大屏(源码下载)

🧡🧡🧡🧡🧡【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)

🧡🧡🧡🧡🤍【博主推荐】HTML酷炫动画表白求爱界面(附源码)

---

     💞 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     🎀 酷炫邀请函 带你体验高大上得邀请

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌