仅当表单数据已更改时，如果用户试图离开页面或关闭窗口，如何向用户显示消息？

Question

我在我的一个项目中有一个要求，如果表单数据已更改，用户希望在离开页面或关闭浏览器/窗口之前看到一条消息。 我发现这个函数可以在用户离开窗口或关闭浏览器时捕捉场景。

window.addEventListener('beforeunload', function (e) {
    e.preventDefault();
    e.returnValue = '';
});

我想知道是否有一种方法可以仅在表单数据已更改时显示该消息。 在这种情况下，SO 用户会知道数据已更改。 到目前为止，我没有找到很多关于这个话题或任何建设性的解决方案。 如果有人有任何示例或建议，请告诉我。

谢谢你。

Answer 1

如果您不使用任何现代框架，您可以构建您的自定义表单状态助手。 当表单在 DOM 上准备好时，您可以迭代每个输入元素并分配一个数据属性 say (data-init-val) 并将其值设置为等于输入元素值。

let inputs = document.querySelectorAll('form#userform input');
for(let inputEl of inputs){
    inputEl.setAttribute('oldVal', inputEl.value);
}

这样您就可以缓存现有的表单值。 当用户关闭窗口时，您可以运行一个函数，通过以下方式将当前输入值与初始缓存值进行比较：

function checkFormState(){
  let inputs = document.querySelectorAll('form#userform input');
  let stateChanged = false;
  for(let inputEl of inputs){
    if(inputEl.getAttribute('oldVal') !== inputEl.value){
        stateChanged = true;
        break;
    }
  }

  return stateChanged;
}

您的 eventListener 可以根据 stateChanged 值做出明智的决定。 PS：您应该根据表单中的输入元素修改输入元素值缓存/比较逻辑。

转到https://jsfiddle.net/v9rztay6/并查看它的运行情况。