javascript - 单击日期选择器后，使输入保持活动状态

Question

我试图找出当您单击显示引导日期选择器的输入时出现的问题，并且在单击输入正确填充但标签返回底部的日期后。

但是在第二次点击输入后，标签保持不变。

我不知道如何犯这个错误。

提前感谢大家的帮助和回答。

$('.form-group').each((i, e) => {
  $('.form-control', e)
    .focus(function() {
      e.classList.add('not-empty');
    })
    .blur(function() {
      this.value === '' ? e.classList.remove('not-empty') : null;
    });
});
$('#sandbox-container input').datepicker({
  format: "dd.mm.yyyy",
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
});

/* === Form Control === */

.form-group {
  position: relative;
  margin-bottom: 10px;
}

.form-group input {
  border-radius: 0;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.form-group input:focus {
  box-shadow: none;
}

.form-group>.lForm-label {
  font-size: 10px;
  color: #9C9AB3;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  pointer-events: none;
  position: relative;
  z-index: 5;
}

.form-group input {
  width: 100%;
}

.form-group>.lForm-label {
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4) translateY(20px);
  transform: scale(1.4) translateY(20px);
}

.form-group.not-empty>.lForm-label {
  -webkit-transform: none;
  transform: none;
}

.form-group input {
  border: 0;
  border-bottom: 1px solid #9C9AB3;
}

.form-group input::placeholder:hover {
  display: none !important;
}

.form-group input,
.form-group input:focus,
.form-group input:focus:hover {
  color: #9C9AB3;
  background: none;
  outline: none;
}

.form-group input:focus,
.form-group input:focus:hover {
  border-bottom: 1px solid #fdd365;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.en-CA.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.js"></script>

<div class="form-group col-md-6">
  <label for="birthDateId" class="form-control-label lForm-label">Date of birth</label>
  <div id="sandbox-container">
    <input type="text" name="dateofbirth" id="birthDateId" class="form-control" value="">
  </div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

我认为如果您使用datePicker 事件处理添加/删除类会更好

检查这个例子

$('#sandbox-container input').datepicker({
  format: "dd.mm.yyyy",
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
}).on('show', function(e) {
  $(this).parents(".form-group").addClass('not-empty')
}).on('hide', function(e) {
  if(!$(this).val())
    $(this).parents(".form-group").removeClass('not-empty')
});

/* === Form Control === */

.form-group {
  position: relative;
  margin-bottom: 10px;
}

.form-group input {
  border-radius: 0;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.form-group input:focus {
  box-shadow: none;
}

.form-group>.lForm-label {
  font-size: 10px;
  color: #9C9AB3;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  pointer-events: none;
  position: relative;
  z-index: 5;
}

.form-group input {
  width: 100%;
}

.form-group>.lForm-label {
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4) translateY(20px);
  transform: scale(1.4) translateY(20px);
}

.form-group.not-empty>.lForm-label {
  -webkit-transform: none;
  transform: none;
}

.form-group input {
  border: 0;
  border-bottom: 1px solid #9C9AB3;
}

.form-group input::placeholder:hover {
  display: none !important;
}

.form-group input,
.form-group input:focus,
.form-group input:focus:hover {
  color: #9C9AB3;
  background: none;
  outline: none;
}

.form-group input:focus,
.form-group input:focus:hover {
  border-bottom: 1px solid #fdd365;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.en-CA.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.js"></script>

<div class="form-group col-md-6">
  <label for="birthDateId" class="form-control-label lForm-label">Date of birth</label>
  <div id="sandbox-container">
    <input type="text" name="dateofbirth" id="birthDateId" class="form-control" value="">
  </div>
</div>