如何使浏览器后退按钮触发输入的更改事件？答案

【问题标题】：How do I make the browser back button trigger an input's change event?如何使浏览器后退按钮触发输入的更改事件？
【发布时间】：2011-05-02 19:32:36
【问题描述】：

我正在尝试检测输入字段的更改，以警告用户表单上未保存的更改。我在字段上使用 onchange 事件来记录表单已更改。然后，如果需要保存，我将使用 beforeunload 窗口事件来阻止用户离开页面。问题是所有主要浏览器上的后退按钮都会让活动输入触发更改事件。我该如何解决这个问题？

以下是我正在使用的测试文件。我希望在用户编辑输入字段然后立即返回时触发警报。编辑文本然后点击正文会触发更改，但这还不够。

starteditor.html

<!doctype html>
<html>
<head>
</head>
<body>
    <a href="editor.html">Click me</a>
</body>
</html>

editor.html

<!doctype html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script>
        $(document).ready(function(){
            $("form").delegate("input", "change", function () { alert("I changed") });
        });
    </script>
</head>
<body>
    Edit text then click the browsers back button.
    <form>
        <input type="text" />
    </form>
</body>
</html>

【问题讨论】：

标签： jquery cross-browser onchange dom-events back-button

【解决方案1】：

简短的回答：你不知道。

后退按钮属于用户，不在页面范围内。您将获得的最接近的是window.unload 事件。但是窗口不知道用户是否关闭了窗口，点击后退按钮，点击 F5 重新加载页面，在 URL 输入字段中输入新 URL，打开书签或告诉浏览器关闭或任何您可能会以其他方式关闭页面。此外，您无法取消 unload 事件：提供它是为了让页面可以干净地关闭。

来自 http://www.w3.org/TR/DOM-Level-2-Events/events.html 的规范，第 1.6.5 节（HTML 事件类型）：

卸载
当 DOM 实现从窗口或框架中删除文档时，会发生 unload 事件。此事件对 BODY 和 FRAMESET 元素有效。

气泡：没有

可取消：否

上下文信息：无

【讨论】：

我了解我无法取消卸载事件，但我可以向用户显示表单已更改而无需保存的消息。我通过向 beforeunload 事件返回一个字符串来做到这一点。我只需要检测到输入已更改才能显示此消息。
beforeunload 事件是非标准的、特定于 Internet Explorer 的事件。
我正在使用 jquery 附加到应该是跨浏览器的事件：$(window).bind("beforeunload", function () {