在IE上,我可以用jQuery(非常不标准,但工作)做到这一点

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

但是是否有可能在Firefox上运行,或者在跨浏览器上获得额外的好处呢?

郑重声明:

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

什么也不做。

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

解决了问题,但使退格键在页面上无法使用,这比原来的行为更糟糕。

编辑: 我这样做的原因是我不是在创建一个简单的网页,而是一个大型的应用程序。仅仅因为你在错误的地方按了退格键而失去了10分钟的工作,这是非常令人恼火的。通过防止退格键返回,防止错误和讨厌用户的比例应该远远超过1000/1。

编辑2:我不是想阻止历史航行,只是想阻止事故。

EDIT3: @brentonstrines评论(因为这个问题太受欢迎了,所以移到这里):这是一个长期的“修复”,但你可以支持Chromium bug来改变webkit中的这种行为


当前回答

我很难找到一个非jquery的答案。谢谢斯塔斯让我走上赛道。

Chrome:如果你不需要跨浏览器支持,你可以使用黑名单,而不是白名单。这个纯JS版本可以在Chrome中运行,但不能在IE中运行。不确定FF。

在Chrome(版本。36, 2014年年中),按键不是在输入或可满足的元素似乎是针对<BODY>。这使得使用黑名单成为可能,我更喜欢使用白名单。IE使用最后一次点击目标-所以它可能是一个div或其他任何东西。这使得这个在IE中毫无用处。

window.onkeydown = function(event) {
    if (event.keyCode == 8) {
    //alert(event.target.tagName); //if you want to see how chrome handles keypresses not on an editable element
        if (event.target.tagName == 'BODY') {
            //alert("Prevented Navigation");
            event.preventDefault();
        }
    }
}  

跨浏览器:对于纯javascript,我发现Stas的答案是最好的。增加一个条件检查contentteditable使它为我工作*:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}

function stopDefaultBackspaceBehaviour(event) {
    var event = event || window.event;
    if (event.keyCode == 8) {
        var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
        var d = event.srcElement || event.target;
        var regex = new RegExp(d.tagName.toUpperCase());
        if (d.contentEditable != 'true') { //it's not REALLY true, checking the boolean value (!== true) always passes, so we can use != 'true' rather than !== true/
            if (regex.test(elements)) {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }
        }
    }
}

*注意ie [edit: and Spartan/TechPreview]有一个“特性”,使与表相关的元素不可编辑。如果你点击其中一个,然后按退格键,它会导航回来。如果你没有editable <td>s,这不是一个问题。

其他回答

我已经在我的代码中使用它一段时间了。我为学生写在线测试,遇到了一个问题,当学生在测试过程中按退格键时,它会把他们带回到登录屏幕。令人沮丧的!它肯定适用于FF。

document.onkeypress = Backspace;
function Backspace(event) {
    if (event.keyCode == 8) {
        if (document.activeElement.tagName == "INPUT") {
            return true;
        } else {
            return false;
        }
    }
}

结合“toolman”&&“Biff MaGriff”给出的解决方案

下面的代码似乎在IE 8/Mozilla/Chrome中正常工作

$(function () {
    var rx = /INPUT|TEXTAREA/i;
    var rxT = /RADIO|CHECKBOX|SUBMIT/i;

    $(document).bind("keydown keypress", function (e) {
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (rx.test(e.target.tagName)) {
                var preventPressBasedOnType = false;
                if (d.attributes["type"]) {
                    preventPressBasedOnType = rxT.test(d.attributes["type"].value);
                }
                preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
            } else {preventKeyPress = true;}
        } else { preventKeyPress = false; }

        if (preventKeyPress) e.preventDefault();
    });
}); 

到目前为止给出的所有答案都集中在将修复脚本编写到web页面上,但是如果我只是想为自己使用该功能,而不影响其他用户呢?

In this case a solution for the browser itself is to be preferred: - Firefox on Linux "unmapped" the backspace behavior since 2006 so it's not affected; (at any rate, it was simply set to scroll up before then) - Chrome has just announced that it will do the same from now on; (http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/) - Firefox on Windows can be set to ignore backspace by going into about:config and changing the backspace_action setting to 2; (http://kb.mozillazine.org/Browser.backspace_action) - Safari ?!

根据评论,如果人们按退格键删除,但字段没有集中,您似乎希望阻止他们丢失表单中的信息。

在这种情况下,您需要查看onunload事件处理程序。Stack Overflow使用它-如果你试图离开页面时,你已经开始写一个答案,它会弹出一个警告。

修正的erikkallen回答:

$(document).unbind('keydown').bind('keydown', function (event) {

    var doPrevent = false, elem;

    if (event.keyCode === 8) {
        elem = event.srcElement || event.target;
        if( $(elem).is(':input') ) {
            doPrevent = elem.readOnly || elem.disabled;
        } else {
            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
        return false;
    }
});