“确认导航”警报框

Question

我正在寻找一个功能，当访问者在他或她尚未完成表单时试图离开页面时显示警告框。我已导入图像以显示我的意思。翻译：title =“确认导航”，content =“你想离开这个页面吗？”，button1 =“离开这个页面”，button2 =“留在这个页面上。”

当您想要返回一个页面时，Facebook会使用此警报框，例如，当您没有完成某人的PM时。

我怎样才能完成这样的事情？

提前致谢。

Answer 1

将window.onbeforeunload与在对表单字段进行更改时设置的标志结合使用。

例如：

var changed_flag = 0; // change in an onchange event or whatever, something like the below

document.getElementById('form_field').onchange = function() {
  changed_flag = 1;
};

window.onbeforeunload = function() {
  if ( changed_flag ) {
    return 'You have unsubmitted changes.'
  }
};