1

Есть готовая форма в стиле 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" >&times;</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" >&times;</button>
        <input  class="form-field__input" type="text">
   </div>
   </div>

0

2 ответа 2

1
[].forEach.call(document.querySelectorAll('.form-field__clear'), (button) => {
  const field = button.parentNode.querySelector('.form-field__input');
  button.addEventListener('mousedown', (e) => {
    e.preventDefault();
    field.value = '';
  });
});
4
  • К сожалению не сработало codepen.io/mx928/pen/JjbBYMV
    – mx928
    4 мар 2021 в 14:07
  • Поправил, попробуйте теперь 4 мар 2021 в 14:25
  • Спасибо, Работает! Подскажите пожалуйста как скрыть кнопку после того как форма очищена?
    – mx928
    4 мар 2021 в 14:39
  • Также есть проблема, некоторые поля имеют значения при загрузке страницы, подскажите как сделать проверку если поле имеет значение при загрузке страницы и в этом случае присвоить клас ".form-field--is-filled" codepen.io/mx928/pen/JjbBYMV
    – mx928
    4 мар 2021 в 16:02
1

Получился такой код, все вроде как работает как и хотелось, если есть ошибки или можно ка то оптимизировать, подскажите пожалуйста!

https://codepen.io/mx928/pen/JjbBYMV

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 => {
  if (el.value) {
    setActive(el, false);
   }
  el.onblur = () => {
    setActive(el, false);
  };
  el.onfocus = () => {
    setActive(el, true);
  };
 el.onkeyup = () => {
    setActive(el, true);
  };

});

[].forEach.call(
document.querySelectorAll('.form-field__clear'), 
(button) => {
  const field = button.parentNode.parentNode.querySelector('.form-field__input, .form-field__textarea');
  button.addEventListener('mousedown', (e) => {
    e.preventDefault();
    field.value = '';
    field.parentNode.parentNode.classList.remove('form-field--is-clear');
  });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.