關於輸入文本字段更改的動態可擴展表單

我想在有人將文本輸入到輸入字段時構建可展開表單。示例用戶填寫表單在要求入住/結帳日期的輸入字段下擴展的位置。關於輸入文本字段更改的動態可擴展表單

或類似的gmail，當你輸入搜索字符串，然後點擊箭頭打開高級搜索表單。我附上了一個相同的屏幕截圖。

在此先感謝您的幫助。

2014-03-13 user3303048

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; 
}

的JavaScript：

$(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"); 
      } 
     }); 
    });

來源

2014-03-13 18:48:25 user2793390

我加了JS提琴：http://jsfiddle.net/kiranphp5/6Z93b/ 3 /，我希望當用戶填寫表格中的地址時，應該通過展開輸入框來要求入住和退房日期。 – user3303048

@ user3303048我更新了我的答案。確保在適當的標籤中包圍JS和CSS -

相關問題

關於輸入文本字段更改的動態可擴展表單

回答

相關問題