Torostar Torostar - 1 month ago 8
Javascript Question

javascript input fade in and focus directly

I have a search box where by clicking on the search icon the input expands.. I want to add the focus immediately after expanding.. currently when the box expends user has to click inside the input to search...

<script>
$('#icon_search_expand').on('click',function(){
if($('#form_group_id').css('display')!='none'){
$('#icon_search_expand').fadeIn(100, 'swing').hide();
$('.search_button').fadeIn(100, 'swing').siblings('div').hide();
}else if($('#icon_search_expand').css('display')!='none'){
$('#form_group_id').fadeIn(100, 'swing').siblings('div').hide();
}
if($('#form_group_id').css('display')!='none'){
$('#icon_search_expand').hide();
$('.search_button').fadeIn(100, 'swing');
}
});
</script>

<div class="form-group" id="form_group_id" style="display:none;">
<input class="form-control" placeholder="{% trans "Search..." %}" type="text" name="q" value="{{ request.REQUEST.q }}" id="form_control_id">
</div>
<i class="fa fa-search" aria-hidden="true" id="icon_search_expand"></i>
<button type="submit" class="search_button" id="search_button_id" aria-hidden="true" value="" style="display:none !important;">
<i class="fa fa-search" id="fa-search-id" aria-hidden="true"></i>
</button>

Answer

did you try focus() like

 $('input.form-control').focus();
Comments