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

Question

Мне жаль, что не было селектора CSS, который мог бы это сделать, потому что я полный noob, когда дело доходит до javascript.

HTML, в основном это:

<div class="searchmenu"> 
<form id="search"> 
    <fieldset> 
    <input type="text" class="inputbox search"/> 
    </fieldset> 
</form> 
</div> 

CSS-это:

.searchmenu form { 
display:none; 
} 

searchmenu:hover form { 
    display:block; 
} 

Форма уже отображается, когда ДИВ наведен, теперь я хочу, чтобы держать его отображается время входной текст находится в фокусе.

Я пытался искать другие случаи, но они либо не работают для моего случая, или я не знаю, как реализовать их D:

Answer 1

DEMO

Вы можете использовать JQuery фокус & размытие.

Как это:

$('.inputbox').focus(function(){ 
    $('.searchmenu').addClass('is_focused'); 
}); 
$('.inputbox').blur(function(){ 
    $('.searchmenu').removeClass('is_focused'); 
}); 

CSS:

.searchmenu form { 
display:none; 
} 
.searchmenu:hover form, 
.searchmenu.is_focused form{ 
    display:block; 
} 
.searchmenu{ 
    background: #eee; 
    padding: 10px; 
} 

Answer 2

связывают поля ввода Jquery события Например

$(".inputbox .search").bind("focus keyup",function(){ 
$(".searchmenu").css("display","block"); 
}); 

Я надеюсь, что это будет Хель pful к вам