I'm trying to add a warning to my web page if the user tries to leave the page while a form is still dirty (in the same way the Stack Overflow does, for example). I've followed the reference implementation of the beforeunload
event from MDN like so:
function beforeUnloadHandler(event) {
// Recommended
event.preventDefault();
// Included for legacy support, e.g. Chrome/Edge < 119
event.returnValue = true;
}
var messageInput = document.getElementById('message');
messageInput.addEventListener("input", function(event) {
if (event.target.value !== "") {
window.addEventListener("beforeunload", beforeUnloadHandler);
} else {
window.removeEventListener("beforeunload", beforeUnloadHandler);
}
});
This works fine on all mobile and desktop browsers, including Safari on MacOS, however this doesn't work on Safari on iOS. Does anyone know why, and does anyone know of an alternative approach I can use on iOS?