Как мне сделать так, чтобы моя панель поиска не рухнула, когда она в фокусе? - PullRequest
Новая
       12

Как мне сделать так, чтобы моя панель поиска не рухнула, когда она в фокусе?

1 голос
/ 01 марта 2020

Мне кажется, что моя панель поиска не может рухнуть, когда сама панель получает фокус, но моя мышь не наводит на нее курсор. Как сделать так, чтобы панель поиска не сворачивалась при получении фокуса, даже если указатель мыши не зависает над ней?

Вот 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>

Ответы [ 2 ]

1 голос
/ 01 марта 2020

Этого можно добиться с помощью Javascript, сделав mouseLeave () eventListner для элемента .search-text.

Это предотвратит закрытие панели поиска. как только он был найден и содержит значение ..

Здесь код, 

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 способом.

1 голос
/ 01 марта 2020

Вам нужно активировать в focus @ класс .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>
...