클릭시 부트 스트랩 입력을 확장하는 방법은 무엇입니까?

Question

내 탐색 바에 검색 창을 만들었지 만 입력을 클릭하면 자신의 정상 크기로 확장됩니다. 자바 스크립트를 사용해야한다고 생각하지만 어떻게해야할지 모르겠다. 당신이 JQuery와 그것을 할 방법은 그

<form action="" method="" class="navbar-form navbar-right" role="search"> 
     <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Rechercher"> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> 
     </span> 
    </div> 
</form> 

Answer 1

:

다음은 내 코드를 다음과 같습니다.

$("input.form-control").click(function() { 
    $(this).addClass("changeStyle"); 
}); 

// the css 
.changeStyle 
{ 
    width:300px; //normal size 
} 

Answer 2

클릭 이벤트에서 입력 너비를 변경하는 방법에 대한 질문은 jQuery 애니메이션을 사용하십시오.

입력 클릭 이벤트에서 너비 속성을 변경해야합니다.

Answer 3

CSS

.large-input { 
    width: 300px; /* whatever you want */ 
} 

HTML

$("#search-input").focus(function(event) { $(event.target).addClass('large-input'); }); $("#search-input").blur(function(event) { $(event.target).removeClass('large-input'); }); 

jQuery를

를 사용

<form action="" method="" class="navbar-form navbar-right" role="search"> 
     <div class="input-group"> 
     <input type="text" class="form-control" id="search-input" placeholder="Rechercher"> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> 
     </span> 
    </div> 
</form> 

JS