Есть скрипт, который стилизирует поля input. Помогите доработать, а то немного коряво работает. Если value имеет значение (текст), нужно чтобы классы были присвоены как при фокусе, чтобы подсказка не появлялась и label не залазил на текст, когда поле не пустое. Наглядно в примере.
$('input').focus(function() {
$(this).parents('.form-group').addClass('focused');
});
$('input').blur(function() {
var inputValue = $(this).val();
if (inputValue == "") {
$(this).removeClass('filled');
$(this).parents('.form-group').removeClass('focused');
} else {
$(this).addClass('filled');
}
})
/* СТИЛИ ПОЛЕЙ ДЛЯ ВВОДА */
.form-group {
position: relative;
margin: 30px;
}
.form-label {
position: absolute;
left: 0;
top: 8px;
color: #555;
z-index: 10;
transition: transform 150ms ease-out, font-size 150ms ease-out;
}
.focused .form-label {
transform: translateY(-125%);
font-size: .75em;
}
.form-group input,
.form-group input {
position: relative;
padding: 12px 0px 5px 0;
width: 100%;
outline: 0;
border: 0;
box-shadow: 0 1px 0 0 #e5e5e5;
transition: box-shadow 150ms ease-out;
}
.form-group input:focus {
box-shadow: 0 2px 0 0 red;
}
.form-group input.filled {
box-shadow: 0 2px 0 0 green;
}
.form-group .bmd-help,
.form-group input.filled+.bmd-help {
display: none;
}
.form-group .bmd-help {
position: absolute;
left: 0;
top: 2.8rem;
font-size: .9em;
color: #888;
background: #fff;
z-index: 10;
}
.focused .bmd-help {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group break">
<label class="form-label" for="title">Название</label>
<input type="text form-input" name="title" id="title" value="" class="wide text_uppercase ultrabold" required>
<span class="bmd-help">Придумайте оригинальное название рецепта, название должно быть кратким и понятным!</span>
</div>
<div class="form-group break">
<label class="form-label" for="title">Название</label>
<input type="text form-input" name="title" id="title" value="Я заполнен! Но label меня перекрывает(" class="wide text_uppercase ultrabold" required>
<span class="bmd-help">Придумайте оригинальное название рецепта, название должно быть кратким и понятным!</span>
</div>