javascript - 单击控件的大小更改

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

给input一个静态宽度

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