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，请尝试如下，

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

单击控件的大小更改

3 个答案: