Сузить перед выгрузкой, чтобы только огонь, если поле изменено или обновлено

Question

Я пытаюсь выяснить, как ограничить команду beforeunload в моей форме. Я смог выяснить, как отменить привязку команды beforeunload, а затем, когда я ухожу от формы, это работает. Однако выгрузка происходит каждый раз, независимо от того, была ли изменена форма. Я пытаюсь выяснить, как заставить beforeunload срабатывать, только если форма была действительно обновлена ​​или изменена. Если пользователь нажимает кнопку «Назад» в браузере, предварительная загрузка не запускается. Это потрясающе. Однако, если пользователь нажимает на ссылку в «форме», появляется всплывающая подсказка перед загрузкой. Это как задумано? Возможно, я должен подходить к этому по-другому? Я новичок ... так что я открыт для предложений.

Я прочитал ссылку MDN, которая объясняет перед загрузкой ... https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload и не может понять, как сузить предыдущую загрузку, только если поле в форме было изменено.

   $('form').submit(function() {
   $(window).unbind('beforeunload');
    });
   $(window).on('beforeunload',function(){
   return '';
    });

Я пытаюсь выяснить, как изменить приведенный выше код, чтобы сработала beforeunload только в том случае, если поле в моей форме изменяется, когда пользователь уходит с этой страницы. Это сбивает с толку пользователя, если появляется всплывающее окно, спрашивающее, хотят ли они уйти со страницы, если ничего не было нажато или изменено.

Answer 1

Как то так. Мы проверяем простую форму и только запрашиваем пользователя, если есть значение.

Добавлен набор переменных при отправке, что позволяет нам обходить наши тесты onunload.

var submitting = false;

window.addEventListener("beforeunload", function (event) {
  console.log('checking form');
  
  let inputValue = document.querySelector('#myInput').value;
  if(inputValue.length > 0 && submitting === false) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }
  
  event.preventDefault();
  
});

document.addEventListener("submit", function(event) { 
  submitting = true;
});

<form submit="somewhere.htm">
  <input id="myInput" type="text" />
  <input type="submit" value="Submit">
</form>
<a href="www.google.com">Test navigate away</a>