событие onchange срабатывает при сворачивании окна браузера

124

27 июня 2019, 15:10

Подскажите, есть input. Нужно отловить событие, когда ввод данных в поле будет завершен. По этому событию будет обновляться запись в БД и сниматься блокировка. Ввод считается завершенным, пользователь щелкнул вне поля на этой странице, ну или нажал tab. В общем, сошел с записи. Кнопку делать не могу, нужно именно поле обрабатывать.

Проблема в том, что onchange, как и focusout, срабатывает, если уйти с вкладки или свернуть браузер. Я понимаю, при этих действиях, наверное, теряется фокус поля и запускается onchange. Но если окно открыть обратно страницу с полем, фокус у поля есть и каретка в том месте, где была при сворачивании и это дает надежду, что можно что-то сделать.

Как можно выйти из ситуации, есть ли какой-то способ не запускать событие при сворачивании браузера?

Спасибо!

Answer 1

У меня получилось только задержать обработку event примерно следующим образом:

// Можем ли мы производить действие (да или нет) 
var canTakeAction = true; 
 
// Обработчик события, вызываемый через малое время 
function takeAction() { 
  if (canTakeAction) { 
    console.log("We take action") 
  } 
} 
 
// Общая функция для изменения видимости 
function handleVisibilityChange(newValue) { 
    canTakeAction = newValue; 
} 
 
// Если у нас вкладка поменялась 
document.addEventListener("visibilitychange", function () { 
 
    if (document.hidden) { 
        handleVisibilityChange(false); 
    } else { 
        handleVisibilityChange(true); 
    } 
}); 
 
// документ доступен 
document.addEventListener('focus', function (evt) { 
    handleVisibilityChange(true); 
}, false); 
// документ теряет фокус 
document.addEventListener('blur', function (evt) { 
    handleVisibilityChange(false); 
}, false); 
//окно доступно 
window.addEventListener('focus', function () { 
    handleVisibilityChange(true); 
}, false); 
// окно теряет фокус 
window.addEventListener('blur', function () { 
    handleVisibilityChange(false); 
}, false);

<!-- Вызываем обработчик события через малое время, чтобы глобальные события уже отработали --> 
<input onblur="setTimeout(takeAction,100)"> 
 <!-- -->