Как сделать, чтобы при заполненном инпут или фокусе, label поднялся выше или если пустой вернуть обратно?
.item-f{
border-radius: 4px;
border: 1px solid #DCECF4;
width: 100%;
height: 60px;
position: relative;
}
input{
border-radius: 4px;
border: 1px solid #DCECF4;
color: #81819F;
font-family: 'Rubik';
font-weight: 400;
font-size: 14px;
padding: 0 15px;
width: 100%;
height: 60px;
}
label{
position: absolute;
top: 8px;
font-size: 14px;
left: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
input:focus + label,
input:valid + label {
top: 0px;
}
<div class="item-f required">
<input type="text" name="city" value="Серг" class="item-label" id="input-city" />
<label for="input-city">Имя</label>
</div>
вот так пробую сделать
const input = $('.item-label');
input.addEventListener('.item-label', () => {
if (input.value !== '') {
input.classList.add('input_filled');
} else {
input.classList.remove('input_filled');
}
});
пишет
Uncaught TypeError: input.addEventListener is not a function