如何让浏览器返回按钮触发输入框的更改事件？

Question

如何让浏览器返回按钮触发输入框的更改事件？

jquerycross-browseronchangedom-eventsback-button

3

我正在尝试检测输入字段的更改，以便在表单上警告用户未保存的更改。我使用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>

- Tim Santeford

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicholas Carey · Accepted Answer

简短回答：你做不到。

返回按钮属于用户，超出页面的范围。你能做到的最接近的是window.unload事件。但窗口不会知道用户是关闭了窗口、点击了返回按钮、按下F5重新加载页面、在URL输入字段中键入了新的URL、打开了书签或告诉浏览器关闭页面等任何方式来关闭页面。此外，你无法取消unload事件：它是为了让页面可以干净地关闭而提供的。

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

unload
当DOM实现从窗口或框架中删除文档时，将发生卸载事件。此事件对BODY和FRAMESET元素有效。
Bubbles: No
Cancelable: No
Context Info: None