如何防止退格键返回? [英] How can I prevent the backspace key from navigating back?

问题描述

在 IE 上，我可以使用(非常非标准，但有效)jQuery 来做到这一点

On IE I can do this with the (terribly non-standard, but working) jQuery

if ($.browser.msie)
    $(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});

但是是否有可能以在 Firefox 上运行的方式或跨浏览器的方式来获得奖励?

But is it possible to do in a way which works on Firefox, or in a cross-browser way for a bonus?

记录:

$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });

什么都不做.

$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });

解决了问题，但使退格键在页面上无法使用，这比原始行为更糟糕.

solves the problem, but renders the backspace key unusable on the page, which is even worse than the original behaviour.

我这样做的原因是我不是在创建一个简单的网页，而是一个大型应用程序.仅仅因为你在错误的地方按下了退格键而失去 10 分钟的工作是非常令人讨厌的.通过阻止退格键向后导航，防止错误与讨厌用户的比率应该远高于 1000/1.

The reason I do this is that I'm not creating a simple web page but a large application. It is incredibly annoying to lose 10 minutes of work just because you pressed backspace in the wrong place. The ratio of preventing mistakes vs. annoying users should be way above 1000/1 by preventing the backspace key from navigating back.

我不是试图阻止历史导航，只是意外.

I'm not trying to prevent history navigation, just accidents.

@brentonstrines 评论(移到这里是因为这个问题非常流行):这是一个长期的修复"，但您可以支持 Chromium bug 在 webkit 中改变这种行为

@brentonstrines comment (moved here since the question is so popular): This is a long-term 'fix', but you could throw your support behind the Chromium bug to change this behavior in webkit

推荐答案

这段代码解决了这个问题，至少在 IE 和 Firefox 中(还没有测试过任何其他的，但我给它一个合理的工作机会，如果问题甚至存在于其他浏览器中).

This code solves the problem, at least in IE and Firefox (haven't tested any other, but I give it a reasonable chance of working if the problem even exists in other browsers).

// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
        var d = $(event.srcElement || event.target);
        var disabled = d.prop("readonly") || d.prop("disabled");
        if (!disabled) {
            if (d[0].isContentEditable) {
                doPrevent = false;
            } else if (d.is("input")) {
                var type = d.attr("type");
                if (type) {
                    type = type.toLowerCase();
                }
                if (types.indexOf(type) > -1) {
                    doPrevent = false;
                }
            } else if (d.is("textarea")) {
                doPrevent = false;
            }
        }
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

这篇关于如何防止退格键返回?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！