Question

我正在编写一个基于Web的应用程序，供我工作的业务内部使用。这是一个相当复杂的应用程序，有许多表单允许用户查看和输入数据，一旦保存将存储在数据库中。

我急于避免的一件事是允许存在用户可能在浏览器中输入大量数据的情况，然后（有意或无意地）导航离开页面而不保存更改。为此，我已经实现了一个入口页面，它打开了一个新的浏览器窗口，其中根本没有导航控件;只有网页本身提供的内容。

但是，用户仍有两种可能会丢失数据的方式：

浏览器“关闭”按钮仍处于启用状态，用户可能会因无意中单击而失去工作。我可以忍受这种情况，因为它可以帮助用户不要在脚下射击自己。
在Internet Explorer中（显然，在Firefox中），Backspace按钮的工作方式类似于Back按钮。我只是偶然发现了这个，并且还没有找到一种简单的方法来阻止这种行为。这可能是一个问题，因为无意中使用了Delete键（例如，将光标定位在只读文本框中，或者当光标不在页面中的任何特定字段上时）将离开页面。

我想要做的事情至少是阻止Backspace从页面导航，如果该页面上有任何用户可写字段，并且自表单加载以来用户已更改了这些字段中的任何字段。理想情况下，当用户登录此Web应用程序时，我想完全禁用Backspace键的这种特定用法。为实现这一点，我能想到的两种可能的方法是：（1）在每个页面加载时清除浏览器的历史记录，或者（2）捕获Backspace键，并且只有当光标位于a中时才允许它工作可以更改文本的字段（例如文本框）。

有谁能建议我如何才能实现这些目标？解决方案需要是程序化的，而不是必须在公司的每个浏览器上手动配置的东西。

Answer 1

不是阻止用户在工作和家中的日常活动中学会期望的*功能，为什么不使用来使用？使“后退”按钮实际上按预期将它们带到上一个屏幕，并使用AJAX静默保存表单，因为它们填写（例如，每5或10秒），所以当他们返回到表单时，您可以检查看看他们是否已经保存了部分未提交的值并重新加载它们。

这种方法与基于Web的应用程序的实际情况一致和如果实施得好，则会使用户满意。警告说“你做错了什么”只会让用户感到沮丧，并使他们更少信任你的应用程序。记住 - 用户几乎从不做错事。这是我们的应用程序与使用不一致。

^{*更像尝试来阻止功能。正如您所发现的那样，设计互联网和Web浏览器的人从未真正希望网站开发人员完全禁止在导航历史中前后移动。}

Answer 2

这样的事情怎么样？你可以在他们离开之前询问他们是否确定。

var changes = false;        
window.onbeforeunload =
        function()
        {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou still have unsaved changes.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }

Answer 3

您应该查看Javascript的window.unload事件。

当用户试图离开页面时会触发此操作。你不能完全阻止他们离开页面，但你可以给他们一个取消的机会。

Answer 4

试试这个

window.onbeforeunload() {
  return "Are you sure you want to navigate away?";
}

控制Web应用程序中的浏览器前进/后退功能

4 个答案: