Любое событие для прикрепления к типу ввода type = "date", которое сработает, когда пользователь прекратит редактирование ввода?

Question

Чат приложение. Я хочу добавить функциональность для просмотра архивов чата. У меня есть <input type="date" />; Предполагается, что пользователь может использовать этот input, чтобы указать, в какой день он хочет видеть архивы.

Firefox отображает хороший календарь для <input type="date" />. Когда пользователь нажимает на месяц, Firefox отображает список месяцев и лет, которые пользователь может выбрать. Теперь я, конечно, хочу отправить запрос на сервер, только когда пользователь закончит редактирование календаря. Неправильно отправлять запрос на сервер, когда пользователь просто нажимает на ввод и начинает редактировать календарь; Также неправильно отправлять запрос, когда пользователь только что выбрал год и месяц, но еще не день этого месяца.

Запуск какого события должно вызвать отправку запроса на сервер?

Я пытался:

• onclick - но это срабатывает, когда пользователь нажимает на ввод и начинает редактировать календарь, а не когда они сделаны;
• onsubmit - но это совсем не срабатывает;
• onchange и oninput - но это также срабатывает, когда пользователь только что выбрал год и / или месяц, но еще не день;
• onblur - но для этого требуется, чтобы пользователь явно щелкал в другом месте, и он не срабатывает, когда пользователь только что щелкнул день и календарь исчезает. Я думаю, что это будет сбивать с толку для пользователя

Есть ли другое подходящее событие?

Answer 1

Я создал фрагмент с двумя очень простыми примерами, как ваша проблема / запрос может быть обработана. Первый подход нацелен на уже предложенное решение (в комментариях) для использования явной кнопки. Второй подход (тот, который я упомянул в комментариях) использует отладку (в частности я использовал отладка Lodash ). Этот подход будет обрабатывать ввод даты следующим образом:

Вызов функции обратного вызова будет задерживаться до тех пор, пока не будет обнаружено событие change через 1500 мс (1,5 с). Таким образом, если пользователь перестанет изменять значение даты на 1,5 секунды, событие будет обработано, и поэтому вы увидите журнал в консоли (в вашем случае вы отправите выбранное значение на сервер). Вы можете отрегулировать время задержки по своему усмотрению (в зависимости от того, что лучше всего подходит для вашего случая использования) и прочитать документы, которые я привел выше. Насколько я заметил, чтобы инициировать change изначально, пользователь должен выбирать каждое значение (день, месяц, год), поэтому также следует учитывать случай, когда пользователь меняет только месяц, или год, или день.

/* Version 1 */

document.getElementById('viewBtn').addEventListener('click', () => {
  const date = document.getElementById('date1').value
  console.log(date);
  // Send the request here
});

/* Version 2 (debouncing) */

document.getElementById('date2').addEventListener('change', _.debounce(event => {
  const date = event.target.value;
  console.log(date);
  // Send the request here
}, 1500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

<div>
  <h3>Version 1 (Explicit submit)</h3>
  <input id="date1" type="date" />
  <button id="viewBtn">View log</button>
</div>

<div>
  <h3>Version 2 (Debouncing)</h3>
  <input id="date2" type="date" />
</div>