缩小 BeforeUnload 以仅在字段更改或更新时触发

Question

我想弄清楚如何在我的表单上限制 beforeunload 命令。我已经能够弄清楚如何取消绑定 beforeunload 命令，然后当我离开这个工作的表单时。但是，无论表单是否更改，每次都会发生卸载。我试图弄清楚如何让 beforeunload 仅在表单实际更新或更改时才触发。如果用户单击浏览器上的后退按钮，则不会触发 beforeunload。太棒了。但是，如果用户单击“表单”上的链接，则会弹出 beforeunload 提示。这是设计好的吗？也许我应该以不同的方式处理这个问题？我是新手..所以我愿意接受建议。

我已经阅读了解释 beforeunload...https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload 的 MDN 链接 并且似乎无法弄清楚如何将 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>