Question

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

当输入被聚焦时，颜色应该是粉红色，但是当有人在输入某些东西并点击其他地方时，颜色应该恢复正常

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

Answer 2

您只需添加一个if语句来检查长度并更改样式。

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

  //below lines added
  if(this.value.length > 0) {
    $(this).prev('.control-label').css('color', 'black');
  }
});

Answer 3

只需将您的javascript更改为：

＆＃13;

$('.form-control').on('focus blur', function (e) {
        $(this).parents('.form-group').toggleClass('focused');
    })

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

更改浮动标签上的标签颜色

3 个答案: