Изменение цветов ярлыков на плавающих меток

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

U необходимо изменить ур сценарий к этому один

$('.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 для этого:

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

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

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