입력 텍스트 필드에서 동적으로 확장 가능한 양식 변경

Question

누군가 입력 필드에 텍스트를 입력 할 때 확장 가능한 양식을 작성하려고합니다. 예제 사용자는 양식이 체크인/체크 아웃 날짜를 묻는 입력 필드 아래로 확장되는 위치를 채 웁니다.

또는 gmail에서와 같이 검색 문자열을 입력하고 화살표를 클릭하면 고급 검색 양식이 열립니다. 동일한 스크린 샷을 첨부했습니다.

도움을 미리 감사드립니다.

Answer 1

HTML :

<input id="geocomplete" style="width:200px;" type="text" placeholder="Type in an address" size="90" autocomplete="on">  

<div id="checkInOutDiv" class="hiddenDiv"> 
    <input id="checkInDate" type="text" /> 
    <input id="checkOutDate" type="text" />  
</div> 
</form> 

CSS :

.hiddenDiv { 
    display:none; 
} 

자바 스크립트 : 나는 JS 바이올린을 추가 한

$(document).ready(function(){ 
     var defaultAddrText = $("#geocomplete").attr("placeholder"); 
     $("#geocomplete").keydown(function(){//could be 'onchange' instead 
      var addr = $(this).val(); 
      if(addr != '' && addr != defaultAddrText){ 
       $("#checkInOutDiv").removeClass("hiddenDiv");  
      }else{ 
       $("#checkInOutDiv").addClass("hiddenDiv"); 
      } 
     }); 
    }); 

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.