html - 更改 float 标签上的标签颜色

Question

我创建了一个 float 标签，它改变了边框颜色和标签元素。我的问题是当输入里面有一些内容时如何更改标签颜色？

输入焦点时颜色应该是粉红色，但是当有人输入内容并点击其他地方时，颜色应该变回正常

js

$('.form-control').on('focus blur', function (e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
})
.trigger('blur');

CSS

#floating-label .form-group .form-control {
  border:none;
  border-bottom: 1px solid red;
  border-radius: 0;
}

#floating-label .form-group {
  display: flex;
  height: 55px;
}

#floating-label .form-control:focus{
  border-color: #FF4070;
}

#floating-label .control-label {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(6px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
}

#floating-label .form-group.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
  color:  #FF4070;
}

#floating-label .form-control {
  align-self: flex-end;
}

#floating-label .form-control::-webkit-input-placeholder {
  color: transparent;
  transition: 240ms;
}

#floating-label .form-control:focus::-webkit-input-placeholder {
  transition: none;
}

#floating-label .form-group.focused .form-control::-webkit-input-placeholder {
  color: #bbb;
}

html

  <form id="floating-label">
    <div class="form-group">
      <label class="control-label">Example label</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label class="control-label">Another label</label>
      <input type="text" class="form-control">
    </div>
  </form>

bootply

Answer 1

你需要把你的脚本改成这个

$('.form-control').on('blur', function (e) {
  var parent = $(this).parents('.form-group');
  parent.removeClass('focused');
  if(this.value.length > 0) {
      parent.addClass('filled');
  }
})
.trigger('blur');

$('.form-control').on('focus', function (e) {
  var parent = $(this).parents('.form-group');
  parent.removeClass('filled');
  parent.addClass('focused');
});