【每日一练】小米搜索框

效果：

思路分析：

输入框焦点事件

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-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;transition: all 0.3s;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本" /><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>/* 1.输入框焦点事件onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容2.小米官网成为焦点： (1)显示ul  (2)自身边框改变 （通过新增search类名）失去焦点： (1)隐藏ul  (2)自身边框改变 （通过移除search类名）3. this关键字 ： 环境对象。 常用于函数中，代表当前函数的所属环境。说人话： 相当于中文的 ‘我’ 字, 谁说的这个字，就代表谁4.js中this规则： 谁调用这个函数，this就指向谁* 事件处理函数中this一般指向事件源自身*///1.获取元素let input = document.querySelector('input')let ul = document.querySelector('.result-list')//2.注册事件//2.1 onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容input.onfocus = function(){console.log('你点我了，我出现光标了，此时可以输入文字')//(1)显示ulul.style.display = 'block'//(2)自身边框改变 （通过新增search类名）this.classList.add('search')        }//2.2 onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容input.onblur = function(){console.log('你点其他地方了，我光标消失了，此时不可以输入文字')//(1)隐藏ulul.style.display = 'none'//(2)自身边框改变 （通过移除search类名）this.classList.remove('search')}</script></body>
</html>

【每日一练】小米搜索框相关推荐

轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
javascript实现小米搜索框
鼠标点击出现下拉菜单效果展示: 代码: <!DOCTYPE html> <html lang="en"><head><meta char ...
python列表框_「每日一练」Python列表框部件的运用
原标题:「每日一练」Python列表框部件的运用用Python就一定要用到界面操作,有一个好的用户界面,才会有好的用户体验,下边就开始创建我们的主窗口,并设置相应的列表框部件吧! 案例创建主窗口, ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
小米官网搜索框部分详解
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
每日分享html之两个input搜索框、两个button按钮、一个logo效果
我是c站的一个小博主,近期我会每天分享前端知识包括(原生的web语句,以及vue2和vue3,微信小程序的写法及知识点)本篇文章收录于html特效专栏中,如果想每天在我这学到一些东西,请关注我并订阅专 ...
java每日一练：面试题集合
6.29:1.说一下jdk和jre的区别? JRE是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言编写的程序运行所需要的软件环境,是提供给想运行java程序的用户使用的 ...
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱写在前面今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...

【每日一练】小米搜索框

【每日一练】小米搜索框相关推荐

最新文章

热门文章