javascript - "Confirm navigation"警报框

Question

我正在寻找一个功能，当访问者在未完成表单的情况下尝试离开页面时，该功能会显示警报框。我导入了一张图像来展示我的意思。翻译:title =“确认导航”，content =“您想离开此页面吗？”，button1 =“离开此页面”，button2 =“留在此页面上”。

当您想返回上一页时(例如，您尚未完成对某人的私信)，Facebook 会使用此警报框。

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

提前致谢。

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.'
  }
};