点击控件的尺寸变化

Question

我有一个输入类型，如下图和我的出生日期。

<div class="input-div spanicon"> 
    <input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB"> 
    <i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i> 
</div> 

这里的fiddle为相同。

点击图标，字段的大小发生变化，有人可以帮忙。

Answer 1

给一个静态的宽度输入

// Event to trigger the calendar in the signup page 
 
$("#triggerCal").click(function() { 
 
    $("#txtDOB").attr("type", "date"); 
 
    $("#txtDOB").focus(); 
 
    $("#txtDOB").click(); 
 
}); 
 

 
// Focus out event of the textbox 
 
$("body").on("focusout", "#txtDOB", function() { 
 
    $("#txtDOB").attr("type", "text"); 
 
});

body.signup-page .login-form form input { 
 
    padding: 0 20px; 
 
} 
 

 
style.css:841 .input-div.spanicon input { 
 
    float: left; 
 
    position: relative; 
 
    width: 85%; 
 
} 
 

 
style.css:275 .login-form form input { 
 
    background-color: #ebf7fa; 
 
    border: 0px; 
 
    font-size: 14px; 
 
    color: #000; 
 
    outline: none; 
 
    border-radius: 5px; 
 
    height: 40px; 
 
    line-height: 15px; 
 
    margin-bottom: 10px; 
 
    padding: 0 5px 0 45px; 
 
    width: 100%; 
 
    display: block; 
 
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28); 
 
    -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28); 
 
    box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28); 
 
} 
 
.textbox-n{ 
 
    width:180px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="input-div spanicon"> 
 
    <input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB"> 
 
    <i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i></div>

Answer 2

这发生type=text变化type=date并适用不同的风格。这只是一个简单的伎俩。

<div class="input-div spanicon"> 
 
    <input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB" onfocus="(this.type='date')"> 
 
    <i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i></div>

Answer 3

如果你需要保持date input一样input text即的onclick然后尝试如下的大小，

// Event to trigger the calendar in the signup page 
 
    $("#triggerCal").click(function(){ 
 
    var itp = $(".textbox-n").width(); 
 
    var dt = $("#txtDOB").attr("type","date"); 
 
    $(dt).focus(); 
 
    $(dt).click(); 
 
    $(dt).css({ 
 
    width : itp 
 
    }); 
 
    }); 
 

 
    // Focus out event of the textbox 
 
    $("body").on("focusout","#txtDOB",function(){ 
 
    $("#txtDOB").attr("type","text"); 
 
    });

body.signup-page .login-form form input { 
 
    padding: 0 20px; 
 
} 
 
style.css:841 
 
.input-div.spanicon input { 
 
    float: left; 
 
    position: relative; 
 
    width: 85%; 
 
} 
 
style.css:275 
 
.login-form form input { 
 
    background-color: #ebf7fa; 
 
    border: 0px; 
 
    font-size: 14px; 
 
    color: #000; 
 
    outline: none; 
 
    border-radius: 5px; 
 
    height: 40px; 
 
    line-height: 15px; 
 
    margin-bottom: 10px; 
 
    padding: 0 5px 0 45px; 
 
    width: 100%; 
 
    display: block; 
 
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28); 
 
    -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.28); 
 
    box-shadow: 0px 2px 2px 0px rgba(50, 50, 50,0.28); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="input-div spanicon"> 
 
        <input placeholder="Enter Date of Birth" class="textbox-n" type="text" id="txtDOB"> 
 
        <i class="fa fa-calendar" id="triggerCal" aria-hidden="true"></i></div>