1

Не понимаю как включать placeholder после нажатия на кнопку ОЧИСТИТЬ. Мне нужно показывать либо дату либо placeholder.

Подскажите, пожалуйста, как быть

Вот мой код

body {
  background-color: #f0f5f9;
}

.pa__top-sec {
  padding: 50px 0;
}

.pa__top-title {
  margin-bottom: 20px;
  color: #455582;
  font: 14px "Gilroy-Extrabold", sans-serif;
}

.pa__middle-range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.pa__middle-item {
  margin-right: 10px;
}

.pa__top-sec input[type="date"] {
  border: 0;
  padding: 12px 20px;
  color: #99a2ba;
  font-size: 14px;
}

.pa__top-sec input[type="date"]:not(.has-value):before {
  content: attr(placeholder);
  width: 100%;
  font: 14px "Gilroy-Extrabold", sans-serif;
}

.btn-accent {
  color: #fff;
  background-color: #ff8007;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn {
  font: 14px "Gilroy-Extrabold", sans-serif;
  font-weight: 800;
  text-align: center;
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
<body>
  <form class="pa__top-sec">
    <div class="pa__top-title btn-sec">Поиск по дате</div>
    <div class="pa__middle-range">
      <div class="pa__middle-item"><input class="pa__middle-input text" type="date" name="date" placeholder="От" onchange="this.className=(this.value!=''?'has-value':'')"></div>
      <div class="pa__middle-item"> <input class="pa__middle-input text" type="date" name="date" placeholder="До" onchange="this.className=(this.value!=''?'has-value':'')"></div>
      <div class="pa__middle-btn">
        <button class="btn btn-accent" type="reset">Очистить</button>
      </div>
    </div>
  </form>
</body>

2
  • JavaScript в помощь ) 7 сен 2022 в 12:32
  • А какое именно событие должно быть при нажатии на кнопку очистить? content: attr(placeholder) ? 7 сен 2022 в 12:36

1 ответ 1

1

Почему-то не срабатывает действие onchange когда вы нажимаете reset

Если обходиться без js, вашу проблему можно решить добавив required для инпутов и заменив стили

.pa__top-sec input[type="date"]:not(.has-value):before {
  content: attr(placeholder);
  width: 100%;
  font: 14px "Gilroy-Extrabold", sans-serif;
}

на:

.pa__top-sec input[type="date"]:not(:valid):before {
  content: attr(placeholder);
  width: 100%;
  font: 14px "Gilroy-Extrabold", sans-serif;
}

( вместо :not(.has-value) теперь :not(:valid) )



UPD

В случае если required по каким-то причинам нельзя ставить, вот решение на на js

const forms = document.querySelectorAll('form')

forms.forEach((form) => {
  form.addEventListener('reset', () => resetFormHandler(form))
})

function resetFormHandler(form) {
  const dateInputs = form.querySelectorAll('input[type="date"]')
  dateInputs.forEach((dateInput) => dateInput.classList.remove('has-value'))
}
1
  • Прям огромное Вам спасибо!!! 7 сен 2022 в 13:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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