如果尝试退出时，通知用户页面已被修改，这需要哪种技术？

Question

如果用户正在填写表单并对其进行了编辑，然后尝试导航到另一个页面，我该如何通知他们？

人们是如何做到这一点的？

这是计算所有输入字段的哈希值并比较它们是否正在退出页面的问题吗？

是否有一个在页面卸载时触发的事件？

- codecompleting

Answer 1

我希望只有当用户实际更改了某些内容时，才会提示用户。类似这样的方式：

var changesMade = false;

function onDataChanged() {
    changesMade = true;
}

$('input:text, textarea, select').change(onDataChanged);
$('input:checkbox, input:radio').click(onDataChanged);

$(window).bind('beforeunload', function() {
    if (changesMade) {
        return 'Changes have been made. Are you sure you want to leave the page?';
    } else {
        return null;
    }
});

- FishBasketGordo

---

点击并不意味着它已经被改变了吗？ - codecompleting

点击并不一定意味着复选框或单选按钮已更改，但如果您真的想要追踪，您可以这样做。我想我应该将其列为“仅检查是否有用户活动”。 - FishBasketGordo

Answer 2

onbeforeunload 事件：

$(window).bind('beforeunload', function() {
    return 'Are you sure?';
});

在某些浏览器上，这将显示消息；而在其他浏览器上则不会。但是，在所有浏览器中都会显示一个带有“离开”和“留下”按钮的对话框（据我所知），以便用户进行选择。此内容与编程有关。

- pimvdb

Answer 3

使用窗口的beforeunload事件。

$(window).bind('beforeunload', function() {
        return confirm("Alert user");
    }); 

- ShankarSangoli

---

我不确定这是否产生了预期的效果。在Chrome上，确认框弹出后，页面离开对话框会弹出，其内容为“true”或“false”。 - pimvdb