如何防止退格键向后导航？

javascript jquery cross-browser internet-explorer firefox

2022-08-30 00:10:57

在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：我不是试图阻止历史导航，只是事故。

编辑3：@brentonstrines评论（由于问题如此受欢迎而移至此处）：这是一个长期的“修复”，但您可以支持Chromium错误以更改webkit中的此行为

答案 1

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

// 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;
        }
    }
});

答案 2

此代码适用于所有浏览器，当不在表单元素上时，或者如果表单元素被禁用，则吞并退格键|ReadOnly。它也很有效，当它对键入的每个密钥执行时，这一点很重要。

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});