Hover textbox остается фиксированным, если выбрано

Question

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

Вот мой код:

$('#search-button, #search-text').hover(function searchbox() { 
 
     $('#search-text').addClass("fixed-textbox"); 
 
    },function() { 
 
     $('#search-text').removeClass("fixed-textbox"); 
 
    });

#search-text { 
 
    left:300px; 
 
    position:relative; 
 
} 
 
.search:hover #search-text { 
 
    left:0; 
 
    position:relative; 
 
} 
 
.search { 
 
    background: gray; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    overflow:hidden 
 
}

<div class="search"> 
 
    <input id="search-text" type="text" placeholder="type here" /> 
 
    <button id="search-button">SEARCH</button> 
 
</div>

Я сделал это таким образом, чтобы добавить эффекты перехода к поисковому тексту. Я думал о добавлении класса в текстовое поле с помощью javascript, но не знаю, будет ли этот способ работать. Также я замечаю, что текстовое поле меняет позицию, если вы вводите ее, не зависая над разделом.

Answer 1

Попробуйте добавить этот новый стиль CSS, чтобы держать окно видимым, когда он имеет фокус:

#search-text:focus { 
    left: 0px;  
} 

Функциональный пример :

#search-text { 
 
    left:300px; 
 
    position:relative; 
 
} 
 
#search-text:focus { 
 
    left: 0px;  
 
} 
 
.search:hover #search-text { 
 
    left:0; 
 
    position:relative; 
 
} 
 
.search { 
 
    background: gray; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    overflow:hidden 
 
}

<div class="search"> 
 
    <input id="search-text" type="text" placeholder="type here" /> 
 
    <button id="search-button">SEARCH</button> 
 
</div>

Answer 2

Просто добавьте чек, чтобы увидеть, если текстовое поле имеет фокус:

$('#search-button, #search-text').hover(function searchbox() { 
    $('#search-text').addClass("fixed-textbox"); 
},function() { 
    if(!$("#search-text").is(":focus")){ 
     $('#search-text').removeClass("fixed-textbox"); 
    } 
}); 

//hide if focus out 
$("#search-text").on("focusout", function(){ 
    //Only if textbox does not have a value 
    if($("#search-text").val() == null || $("#search-text").val() == ""){ 
     $('#search-text').removeClass("fixed-textbox"); 
    } 
}); 

Answer 3

Я думаю, что это должно сделать примерно то, что вы ищете. Я решил использовать событие blur, а не событие hover, что означает, что текстовое поле не исчезнет, ​​пока пользователь не щелкнет в другом месте, и им не нужно нажимать на него, чтобы начать вводить текст.

Существует также анимация для ввода.

var VISIBLE_CLASS = 'fixed-textbox'; 
 

 
$(function() { 
 

 
    var $text = $('#search-text'), 
 
     $button = $('#search-button'); 
 

 
    function toggle(bool) { 
 
    return function() { 
 
     if(bool) { 
 
     $text.addClass(VISIBLE_CLASS); 
 
     $text.focus(); 
 
     } else { 
 
     $text.removeClass(VISIBLE_CLASS); 
 
     } 
 
    } 
 
    } 
 

 
    $button.on('click', toggle(true)); 
 
    $button.on('hover', toggle(true)); 
 
    $text.on('blur', toggle(false)); 
 
});

#search-button { 
 
    /* show above during animation */ 
 
    z-index:10; 
 
    position:relative; 
 
} 
 

 
#search-text { 
 
    left:300px; 
 
    position:relative; 
 
    -webkit-transition-duration:0.3s; 
 
} 
 

 
#search-text.fixed-textbox { 
 
    left:0px; 
 
    -webkit-transition-duration:0.3s; 
 
} 
 

 
.search { 
 
    background: gray; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    overflow:hidden 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <input id="search-text" type="text" placeholder="type here"/> 
 
    <button id="search-button">SEARCH</button> 
 
</div>