如何使我的搜索欄在聚焦時不會折疊？

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