搜索框html代码 + 平滑展开

AKLMED
已于 2023-12-29 19:53:03 修改
阅读量966
点赞数 11
文章标签： html 前端 javascript css
于 2023-12-29 19:08:00 首次发布
本文链接：https://blog.youkuaiyun.com/AKLMED/article/details/135297146
版权
图片展示：
<!DOCTYPE html>
<html>
<head>
  <title>搜索框示例</title>
  <style>
  
    @font-face {
      font-family: "1";
      font-weight: 400;
      src: url("//at.alicdn.com/wf/webfont/t6dUpf78QV1c/b5zii7nYsuGM.woff2") format("woff2"),
           url("//at.alicdn.com/wf/webfont/t6dUpf78QV1c/MhBYWdtT6YRn.woff") format("woff");
      font-display: swap;
    }

    .search-container {
      text-align: center;
      margin-top: 20px;
    }

    .search-input-container {
      position: relative;
      display: inline-block;
      overflow: hidden;
      transition: width 0.3s;
      width: 100px;
    }

    .search-input-container.expand {
      width: 300px;
    }

    .search-icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      fill: #ccc;
    }

    .search-text-after-icon::after {
      content: "|";
      position: absolute;
      top: 50%;
      right: 9px;
      transform: translateY(-50%);
      font-size: 15px;
      color: #ccc;
    }

    #search-input {
      padding: 10px 11px 10px 31px; /* 调整右侧内边距为10px */
      width: calc(100% - 50px); /* 减去右侧图标和竖线的宽度 */
      border: 2px solid #ccc;
      border-radius: 5px;
      font-size: 15.4px;
      font-family: "1", Arial, sans-serif;
      outline: none;
    }

  </style>
</head>
<body>
  <div class="search-container">
    <div class="search-input-container" onclick="expandSearch()">
      <svg t="1703847659003" class="icon search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3205" width="21" height="21">
  <path d="M639.800062 0.15995c-211.997751 0-383.880037 171.882287-383.880037 383.880038 0 64.811746 16.218932 125.816682 44.626054 179.399937l-266.924586 266.860606 0.22393 0.19194A112.444861 112.444861 0 0 0 0 910.979319a112.892721 112.892721 0 0 0 112.892721 112.892721c31.510153 0 59.949266-12.987941 80.454858-33.877413l-0.06398-0.06398 266.828616-266.796626c53.615245 28.503093 114.716151 44.786004 179.687847 44.786004 211.997751 0 383.880037-171.882287 383.880038-383.880037s-171.882287-383.880037-383.880038-383.880038zM153.392065 950.007123a55.982505 55.982505 0 0 1-40.499344 17.370571 56.430366 56.430366 0 0 1-56.462355-56.430365c0-15.931022 6.717901-30.166573 17.370571-40.499344l-0.28791-0.25592 258.031365-258.031365a387.111028 387.111028 0 0 0 79.783068 79.911028l-257.935395 257.935395zM639.800062 703.972009c-176.648797 0-319.900031-143.283224-319.900031-319.900031 0-176.648797 143.251234-319.900031 319.900031-319.900032 176.616807 0 319.900031 143.251234 319.900032 319.900032 0 176.616807-143.283224 319.900031-319.900032 319.900031z" fill="#333333" p-id="3206"></path>
  <path d="M639.800062 160.109966a223.930022 223.930022 0 0 0-223.930021 223.930022 15.995002 15.995002 0 0 0 31.990003 0 191.940019 191.940019 0 0 1 191.940018-191.940019 15.995002 15.995002 0 0 0 0-31.990003z" fill="#333333" p-id="3207"></path>
</svg>

      <input type="text" id="search-input" placeholder="搜索..." class="search-text-after-icon">
    </div>
  </div>

  <script>
    var searchInputContainer = document.querySelector(".search-input-container");
    var searchInput = document.getElementById("search-input");

    function expandSearch() {
      searchInputContainer.classList.add("expand");
      searchInput.focus();
    }

    function collapseSearch() {
      searchInputContainer.classList.remove("expand");
    }

    searchInput.addEventListener("keyup", function(event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        performSearch();
      }
    });

    searchInput.addEventListener("blur", function() {
      setTimeout(collapseSearch, 40);
    });

    function performSearch() {
      var searchText = searchInput.value;
      console.log("搜索：" + searchText);
    }
  </script>
</body>
</html>