如何防止退格键导航回?

在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中的这种行为

当前回答

修正的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;
    }
});

2014-08-25 08:22:11

其他回答

这个解决方案与其他已经发布的解决方案类似，但它使用了一个简单的白名单，使其易于定制，只需在.is()函数中设置选择器，就可以允许在指定元素中使用退格。

我在这个表单中使用它来防止页面上的退格符返回:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input:not([readonly]), textarea")) {
        e.preventDefault();
    }
});

2012-12-07 03:28:35

修正的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;
    }
});

2014-08-25 08:22:11

这段代码解决了所有浏览器的问题:

onKeydown:function(e)
{
    if (e.keyCode == 8) 
    {
      var d = e.srcElement || e.target;
      if (!((d.tagName.toUpperCase() == 'BODY') || (d.tagName.toUpperCase() == 'HTML'))) 
      {
         doPrevent = false;
      }
       else
      {
         doPrevent = true;
      }
    }
    else
    {
       doPrevent = false;
    }
      if (doPrevent)
      {
         e.preventDefault();
       }

  }

2011-04-12 11:26:51

以下是我对得票最多的答案的改写。我试着检查element.value!==undefined(因为有些元素可能没有HTML属性，但可能在原型链的某个地方有javascript值属性)，然而这并不是很好，并且有很多边缘情况。似乎没有一个很好的方法来证明这一点，所以白名单似乎是最好的选择。

这将在事件气泡阶段的末尾注册元素，因此如果您想以任何自定义方式处理Backspace，您可以在其他处理程序中这样做。

这也检查instanceof HTMLTextAreElement，因为理论上可以有一个继承自它的web组件。

这不会检查contentEditable(与其他答案结合)。

https://jsfiddle.net/af2cfjc5/15/

var _INPUTTYPE_WHITELIST = ['text', 'password', 'search', 'email', 'number', 'date'];

function backspaceWouldBeOkay(elem) {
    // returns true if backspace is captured by the element
    var isFrozen = elem.readOnly || elem.disabled;
    if (isFrozen) // a frozen field has no default which would shadow the shitty one
        return false;
    else {
        var tagName = elem.tagName.toLowerCase();
        if (elem instanceof HTMLTextAreaElement) // allow textareas
            return true;
        if (tagName=='input') { // allow only whitelisted input types
            var inputType = elem.type.toLowerCase();
            if (_INPUTTYPE_WHITELIST.includes(inputType))
                return true;
        }   
        return false; // everything else is bad
    }
}

document.body.addEventListener('keydown', ev => {
    if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
        //console.log('preventing backspace navigation');
        ev.preventDefault();
    }
}, true); // end of event bubble phase

2015-09-14 08:56:19

为了稍微详细说明@erikkallen的精彩回答，这里有一个允许所有基于键盘的输入类型的函数，包括HTML5中引入的那些:

$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;
    var INPUTTYPES = [
        "text", "password", "file", "date", "datetime", "datetime-local",
        "month", "week", "time", "email", "number", "range", "search", "tel",
        "url"];
    var TEXTRE = new RegExp("^" + INPUTTYPES.join("|") + "$", "i");
    if (event.keyCode === 8) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && d.type.match(TEXTRE)) ||
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        } else {
            doPrevent = true;
        }
    }
    if (doPrevent) {
        event.preventDefault();
    }
});

2014-03-17 19:36:54

如何防止退格键导航回?

推荐文章

最新文章

标签