javascript - 将 BeforeUnload 缩小为仅在字段更改或更新时触发

Question

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

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