小米搜索框"/>
Web APIs——焦点事件以及小米搜索框
一、事件类型
二、焦点事件
<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('focus',function(){console.log('有焦点触发')})input.addEventListener('blur',function(){console.log('失去焦点触发')})</script>
</body>小米搜索框
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下拉菜单
<!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;}.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. 获取元素const input = document.querySelector('[type=search]')const ul = document.querySelector('.result-list')// console.log(input);// 2. 监听事件 获得焦点input.addEventListener('focus',function(){// ul 显示ul.style.display = 'block'// 添加一个带有颜色边框的类名input.classList.add('search')})// 3. 监听事件 失去焦点input.addEventListener('blur',function(){ul.style.display = 'none'input.classList.add('search')})</script>
</body></html>更多推荐
Web APIs——焦点事件以及小米搜索框
发布评论