如何使用 JavaScript 防止浏览器对退格按钮的默认历史返回操作？

Posted 2023-02-21

【中文标题】如何使用 JavaScript 防止浏览器对退格按钮的默认历史返回操作？

【英文标题】：How can I prevent the browser's default history back action for the backspace button with JavaScript?

【发布时间】：2011-04-20 12:14:22

【问题描述】：

有没有办法防止用户在浏览器中按下退格键时发生默认操作？

我不需要阻止用户离开，只需使用默认的退格操作即可。我需要退格来做一些不同的事情（这是一个游戏）。

我试过没有成功：

window.addEventListener('keydown', function(e) 
    if (e.keyCode === Game.Key.BACK_SPACE)
    
        e.preventDefault();
        e.stopPropagation();
        return false;
    
, false);

如果我在 if 中放置一个警报，则在按下退格键时会显示警报。所以，keyCode 是正确的。

这必须在 Opera 10.6、Firefox 4、Chrome 6、Internet Explorer 9 和 Safari 5 中运行。

【问题讨论】：

您是否尝试过捕获keypress 和/或keyup？

在哪个浏览器中失败？

相关问题：SO: How can I prevent the backspace key from navigating back?

【参考方案1】：

您不需要return false 或e.stopPropagation()；两者都不会对附加 addEventListener 的侦听器产生任何影响。您的代码在 Opera 中不起作用，它只允许您在 keypress 事件或 IE addEventListener。只要您在document 上还没有keydown 和keypress 事件处理程序，以下内容应该适用于所有浏览器。

编辑：它现在还过滤掉源自<input> 或<textarea> 元素的事件：

function suppressBackspace(evt) 
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;

    if (evt.keyCode == 8 && !/input|textarea/i.test(target.nodeName)) 
        return false;
    


document.onkeydown = suppressBackspace;
document.onkeypress = suppressBackspace;

【讨论】：

虽然这有效，但它会阻止输入工作。它不应该阻止输入元素上的退格键。

如果它有效，您的解决方案也是如此。我将编辑我的答案。

您是否认为可以采取其他方式——阻止用户离开页面而不是尝试停止所有退格操作？

不，您不能阻止用户离开页面。浏览器阻止了这一点，这是正确的：如果他们想离开页面，这取决于用户。有一个unload 事件（以及许多浏览器中的beforeunload）在页面即将关闭或转到其他位置时触发，但您无法抑制该事件。

当然，除非它是一个应用程序并且用户可能会无意中失去工作......现在浏览器不仅仅适用于经典网站。

【参考方案2】：

如果您希望自己修复，而不影响其他用户在编写网页脚本时，请阅读下文。

以下是一些仅更改您正在使用的浏览器的解决方案： - Linux 上的 Firefox 自 2006 年以来“未映射”退格行为，因此不受影响； （无论如何，在此之前它只是设置为向上滚动） - Chrome 刚刚宣布从现在开始也将这样做； (http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/) - Windows 上的 Firefox 可以通过进入 about:config 并将 backspace_action 设置更改为 2 来设置忽略退格； (http://kb.mozillazine.org/Browser.backspace_action) - 野生动物园？！

【讨论】：

作为使用 Jupyter 笔记本的最终用户，这个答案是救命稻草。

【参考方案3】：

我在 Telerik 的页面脚本中找到了可以使用的。脚本阻止后退按钮操作：通过单击浏览器后退按钮和页面上的退格键。该脚本有效。我在我的项目中使用它。 http://www.telerik.com/community/code-library/aspnet-ajax/general/disable-backspace-from-master-page.aspx