javascript輸入淡入並直接對焦

Question

我有一個搜索框，其中通過點擊搜索圖標輸入展開..我想擴大後立即添加焦點..目前當框消費用戶必須點擊輸入內搜索...

<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 1

你嘗試對焦（）一樣

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