本文介绍了如何使用JavaScript实现一个搜索框的交互效果，包括焦点事件onfocus和onblur的处理。当输入框获得焦点时，显示下拉列表并改变边框样式；失去焦点时，隐藏列表并恢复边框样式。
效果：
思路分析：
输入框焦点事件
onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容。
onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容。
1.获取元素
2.注册事件
2.1 onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容
(1)显示ul
(2)自身边框改变 （通过新增search类名）
2.2 onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容
(1)隐藏ul
(2)自身边框改变 （通过移除search类名）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-w
最低0.47元/天 解锁文章
3325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
