Есть готовая форма в стиле Material Design
Пытаюсь добавить кнопки сброса к инпутам в виде крестиков, появляющихся справа когда в поле есть значение.
Подскажите как добавить событие на кнопку (крестик), чтобы при нажатии на неё поле очищалось?
const setActive = (el, active) => {
const formField = el.parentNode.parentNode;
if (active) {
formField.classList.add('form-field--is-active');
el.value === '' ?
formField.classList.remove('form-field--is-clear') :
formField.classList.add('form-field--is-clear');
} else {
formField.classList.remove('form-field--is-clear');
formField.classList.remove('form-field--is-active');
el.value === '' ?
formField.classList.remove('form-field--is-filled') :
formField.classList.add('form-field--is-filled');
}
};
[].forEach.call(
document.querySelectorAll('.form-field__input, .form-field__textarea'),
el => {
el.onblur = () => {
setActive(el, false);
};
el.onfocus = () => {
setActive(el, true);
};
el.onkeyup = () => {
setActive(el, true);
};
});
.form-field {
display: block;
margin-bottom: 16px;
width:300px;
}
.form-field--is-active .form-field__control:before {
box-shadow: 0 0 0 1px #0088cc, inset 0 0 0 1px #0088cc!important;
}
.form-field--is-active .form-field__label {
font-size: 12px;
transform: translateY(-13px);
}
.form-field--is-filled .form-field__label {
font-size: 12px;
transform: translateY(-13px);
}
.form-field__label {
display: block;
color: #878787;
font-size: 16px;
font-weight: normal;
left: 0;
margin: 0;
position: absolute;
top: 0;
transition: all 0.2s;
width: 100%;
padding: 20px 12px 18px;
line-height: 22px;
}
.form-field__control {
position: relative;
width: 100%;
}
.form-field__control:before {
box-shadow: inset 0 0 0 1px #ccc;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
z-index: 0;
border-radius: 4px;
transition: .1s ease-out;
transition-property: border;
}
.form-field:hover .form-field__control:before {
box-shadow: inset 0 0 0 1px #878787;
}
.has-error .form-field__control:before {
box-shadow: inset 0 0 0 1px #f73d34!important;
}
.form-field__input,
.form-field__textarea {
padding: 20px 12px 18px;
font-size: 16px;
line-height: 22px;
display: block;
background: none;
border: 0;
transition: .1s ease-out;
transition-property: color;
margin: 0;
width: 100%;
position: relative;
}
.form-field--is-filled .form-field__input, .form-field--is-active .form-field__input, .form-field--is-filled .form-field__textarea, .form-field--is-active .form-field__textarea {
padding-top: 28px;
padding-bottom: 10px;
}
.form-field__input:focus,
.form-field__textarea:focus {
outline: 0;
}
.form-field__clear {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
opacity: .2;
z-index: 1;
border: 0;
display: none;
padding: 0 10px;
font-weight: 400;
transition: opacity .1s ease-out;
background: transparent;
outline: none;
font-size:20px;
}
.form-field__clear:hover {
opacity: 1;
}
.form-field--is-clear .form-field__clear {
display: block;
}
<div class="form-field">
<div class="form-field__control">
<label class="form-field__label">Имя</label>
<button type="button" class="form-field__clear" >×</button>
<input class="form-field__input" type="text">
</div>
</div>
<div class="form-field">
<div class="form-field__control">
<label class="form-field__label">Фамилия</label>
<button type="button" class="form-field__clear" >×</button>
<input class="form-field__input" type="text">
</div>
</div>