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

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

输入文本字段更改时的动态可扩展表单

1 个答案: