如何使我的搜索栏在聚焦时不会折叠？

Question

当搜索栏本身获得焦点时，我似乎无法让我的搜索栏不折叠，但我的鼠标没有悬停在它上面。 如何使我的搜索栏在接收焦点时不会折叠，即使我的鼠标指针没有悬停在它上面？

这是 CSS 和 HTML：

 .search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #474646; height: 40px; border-radius: 50px; padding: 10px; } .search-box .search-btn { color: #bb14bb; float: right; width: 40px; height: 40px; border-radius: 50%; background: #474646; display: flex; justify-content: center; align-items: center; transition: .4s; } .search-box .search-text { border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: .4s; line-height: 40px; width: 0px; } .search-box:hover>.search-text { width: 240px; padding: 0 6px; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> <div class="search-box"> <input class="search-text" type="text" name="box" placeholder="Search here..."> <a class="search-btn" href="#"> <i class="fas fa-search"></i> </a> </div>

Answer 1

您需要在类 .search-text 上激活焦点，我修改了您的代码并将其添加到您给定的代码中，当您将鼠标悬停在框外时，除非您单击，否则它不会变松大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .search-box{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background: #474646;
   height: 40px;
   border-radius: 50px;
   padding: 10px;
}
.search-box .search-btn{
   margin-top: -10px;
   color: #bb14bb;
   float: right;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #474646;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: .4s;
}
.search-box .search-text{
 margin-top: -10px;
 border:none;
 background: none;
 outline: none;
 float: left;
 padding: 0;
 color: white;
 font-size: 16px;
 transition: .4s;
 line-height: 40px;
 width: 0px;
}

.search-box:hover > .search-text{
    width: 240px;
    padding: 0 6px;
}
/*this will keep your text box active as far as its in focus, even the mouse is hovered away.*/
.search-text:focus{
    width: 240px;
    padding: 0 6px;
}
</style>
<body>
    <div class="search-box">
        <input class="search-text" type="text" name="box" placeholder="Search here...">
          <a class="search-btn" href="#">
             <i class="fas fa-search"></i>
          </a>
      </div>

</body>
</html>

Answer 2

您可以使用 Javascript 通过在.search .search-text元素上创建mouseLeave() eventListner来实现这一点。

这将防止搜索栏在悬停并包含值后关闭。

这里的代码，

if(search.value){
   search.style.width = "240px";
   search.style.padding = "0 6px";
}

将检查搜索输入字段中是否存在任何值，如果存在，它将保持与悬停时相同的宽度。

工作片段如下，

 const search = document.querySelector('.search-text'); search.addEventListener('mouseleave', () => { if(search.value){ search.style.width = "240px"; search.style.padding = "0 6px"; } })

 .search-box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #474646; height: 40px; border-radius: 50px; padding: 10px; } .search-box .search-btn{ margin-top: -10px; color: #bb14bb; float: right; width: 40px; height: 40px; border-radius: 50%; background: #474646; display: flex; justify-content: center; align-items: center; transition: .4s; } .search-box .search-text{ margin-top: -10px; border:none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: .4s; line-height: 40px; width: 0px; } .search-box:hover > .search-text{ width: 240px; padding: 0 6px; }

 <div class="search-box"> <input class="search-text" type="text" name="box" placeholder="Search here..."> <a class="search-btn" href="#"> <i class="fas fa-search"></i> </a> </div>

注意：您还可以添加 CSS，例如，

.search-text:focus{
    width: 240px;
    padding: 0 6px;
}

但是当您在搜索框外部单击时，即使其中有值，这也会关闭搜索框，因此如果您以JS方式处理它会更好..

如何使我的搜索栏在聚焦时不会折叠？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-03-01 11:24:00

解决方案2
1 2020-03-01 11:25:30

如何使我的搜索栏在聚焦时不会折叠？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-03-01 11:24:00

解决方案2 1 2020-03-01 11:25:30

解决方案1
1 已采纳 2020-03-01 11:24:00

解决方案2
1 2020-03-01 11:25:30