HTML/CSS实现小米官网搜索框效果

最新推荐文章于 2024-06-10 11:44:20 发布

明哥.

最新推荐文章于 2024-06-10 11:44:20 发布

阅读量1.6k

点赞数

文章标签： html 前端 javascript 有趣的前端案例明哥山月记

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123564166

版权

效果图：

需求分析：

1、输入框焦点事件

onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容。

onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容。

2、获取元素

3、注册事件

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="#">红米手机</a></li>
    <li><a href="#">小米10S</a></li>
    <li><a href="#">小米笔记本</a></li>
    <li><a href="#">小米手机</a></li>
    <li><a href="#">云米空调</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)显示ul
    ul.style.display = 'block'
    //(2)自身边框改变 （通过新增search类名）
    this.classList.add('search')
  }

  //2.2 onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容
  input.onblur = function(){
    console.log('你点其他地方了，我光标消失了，此时不可以输入文字')
    //(1)隐藏ul
    ul.style.display = 'none'
    //(2)自身边框改变 （通过移除search类名）
    this.classList.remove('search')
  }


</script>
</body>
</html>