Любое событие, присоединяемое к input type = "date", которое срабатывает, когда пользователь прекращает редактировать ввод?
Приложение для чата. Я хочу добавить функцию просмотра архивов чатов. У меня <input type = "date" />; намерение состоит в том, чтобы пользователь мог использовать этот input, чтобы указать, с какого дня он хочет видеть архивы.
Firefox отображает красивый календарь для <input type = "date" />. Когда пользователь щелкает месяц, Firefox отображает список месяцев и лет, которые пользователь может выбрать. Теперь я, конечно, хочу отправлять запрос на сервер только после того, как пользователь закончит редактировать календарь. Неправильно отправлять запрос на сервер, когда пользователь просто нажимает на ввод и начинает редактировать календарь; Также неправильно отправлять запрос, когда пользователь только что выбрал год и месяц, но еще не день этого месяца.
Срабатывание какого события должно вызвать отправку запроса на сервер?
Я старался:
onclick- но это срабатывает, когда пользователь щелкает ввод и начинает редактировать календарь, а не когда они закончили;onsubmit- но это вообще не срабатывает;onchangeиoninput- но это также срабатывает, когда пользователь только что выбрал год и / или месяц, но еще не день;onblur- но это требует, чтобы пользователь явно щелкнул где-нибудь еще, и не запускается, когда пользователь только что щелкнул день, и календарь исчезнет. Я думаю, это запутает пользователя
Есть ли другое подходящее мероприятие?
@jonatjano Пробовал, спасибо за предложение. Но я боюсь, что это будет довольно запутать пользователя. См. Отредактированный вопрос
Вы можете прослушивать событие onchange и запускать серверный вызов Только, когда все три значения выбраны пользователем. В противном случае вам нужно будет добавить дополнительную кнопку, которая потребует активного «представления» со стороны пользователя.
Похоже, вам лучше иметь настоящий <button type = "submit">View</button>.
@RamizWachtler Откуда мне знать? Пользователь мог намеренно оставить некоторые из трех значений без изменений.
Извините, я вас немного не понял. Я думал, что от пользователя требуется выбрать все значения (день, месяц, год)
Если вы не укажете значение, он должен отобразить dd/mm/yy, чтобы вы могли его найти
Я думаю, что самый простой способ - это тот, который предлагает @NiettheDarkAbsol. Еще мне приходит в голову использовать onchange с противодействием, поэтому, если через определенное время не запускается событие onchange - отправьте запрос на сервер.
@RamizWachtler Впервые да. Но когда пользователь уже один раз выбрал подходящую дату и загрузил журналы чата с этой даты, он может захотеть сделать это снова. Затем они могут переключить день, но оставить месяц и год такими, какими они их выбрали ранее.
@jonatjano См. выше
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я создал фрагмент с двумя очень простыми примерами решения вашей проблемы / запроса. Первый подход нацелен на уже предложенное решение (в комментариях) для использования явной кнопки. Второй подход (тот, который я упомянул в комментариях) использует debouncing (в частности, я использовал Lodash debounce). Этот подход будет обрабатывать ввод даты следующим образом:
Вызов функции обратного вызова будет отложен до тех пор, пока не будет обнаружено событие change по прошествии 1500 мс (1,5 секунды). Поэтому, если пользователь перестанет изменять значение даты на 1,5 секунды, событие будет обработано, и, следовательно, вы увидите журнал в консоли (в вашем случае вы отправите выбранное значение на сервер). Вы можете настроить время задержки по своему усмотрению (в зависимости от того, что лучше всего подходит для вашего варианта использования) и прочитать документы, которые я привел выше. Насколько я заметил, для первоначального запуска change пользователь должен выбрать каждое значение (день, месяц, год), поэтому случай, когда пользователь меняет только месяц, год или день, также должен быть рассмотрен.
/* Version 1 */
document.getElementById('viewBtn').addEventListener('click', () => {
const date = document.getElementById('date1').value
console.info(date);
// Send the request here
});
/* Version 2 (debouncing) */
document.getElementById('date2').addEventListener('change', _.debounce(event => {
const date = event.target.value;
console.info(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>
возможно,
onblur, который должен срабатывать, когда пользователь нажимает на любой другой элемент, где событиеclickотсутствует какpreventDefault