缩小先于卸载，仅在更改或更新字段时触发 [英] Narrow Down BeforeUnload To Only Fire If Field Is Changed or Updated

问题描述

我试图弄清楚如何限制表单上的beforeunload命令.我已经能够弄清楚如何取消绑定beforeunload命令，然后当我离开该表单导航时.但是，无论是否更改了表格，每次都会进行卸载.我试图弄清楚如何使beforeunload仅在表单实际上已更新或更改时才触发.如果用户单击浏览器上的后退"按钮，则不会触发beforeunload.太棒了.但是，如果用户单击表单"上的链接，则会弹出beforeunload提示.这是设计的吗?也许我应该以不同的方式来对待?我是新手.所以我愿意接受建议.

I am trying to figure out how to limit the beforeunload command on my form. I have been able to figure out how to unbind the beforeunload command and then when I go to navigate away from the form this works. However, the unload happens every time regardless of whether or not the form was changed. I'm trying to figure out how to get the beforeunload to only fire if the form was actually updated or changed. If the user clicks the back button on the browser, the beforeunload does not fire. This is perfect. However, if the user clicks on a link on the "form" it pops up the beforeunload prompt. Is this as designed? Perhaps I should be approaching this differently? I'm a newbie..so I'm open to suggestions.

我已经阅读了MDN链接，该链接解释了beforeunload ... https://developer.mozilla.org/zh-CN/docs/Web/Events/beforeunload 而且似乎无法弄清楚如何将beforeunload范围缩小到仅当表单上的字段已更改时.

I have read through the MDN link that explains beforeunload...https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload and can't seem to figure out how to narrow down the beforeunload to only if a field on the form has been changed.

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

我试图弄清楚如何更改上面的代码，以便仅当用户离开该页面导航时，表单上的字段发生更改时，才会触发beforeunload.如果弹出窗口询问是否单击或更改任何内容，是否要离开页面，这会使用户感到困惑.

I am trying to figure out how to alter the code above so that the beforeunload only fires if a field on my form changes when the user goes to navigate away from this page. It's confusing for the user if there is a pop up asking if they want to navigate away from the page if nothing has been clicked or changed.

推荐答案

类似的东西. 我们签出简单的表格，只有在有值时才提示用户.

Something like this. We check out simple form and only prompt user if there is a value.

提交时添加了变量集，这使我们可以绕过onunload测试.

Added variable set when submitting, this allows us to bypass our onunload tests.

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>

这篇关于缩小先于卸载，仅在更改或更新字段时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！