如何防止退格键导航回?

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

当前回答

为我工作

<script type="text/javascript">


 if (typeof window.event != 'undefined')
    document.onkeydown = function()
    {
        if (event.srcElement.tagName.toUpperCase() != 'INPUT')
            return (event.keyCode != 8);
    }
else
    document.onkeypress = function(e)
    {
        if (e.target.nodeName.toUpperCase() != 'INPUT')
            return (e.keyCode != 8);
    }

</script>

2014-09-29 16:38:46

其他回答

性能?

我担心性能，做了一个小提琴:http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

var stresstest = function(e, method, index){...

我已经分析了我在这篇文章中发现的最有前途的方法。事实证明，它们都非常快，而且很可能在输入时不会造成“迟钝”的问题。我看到的最慢的方法是在IE8中调用10,000次大约125毫秒。也就是0.0125ms / Stroke。

我发现Codenepal和Robin Maben发布的方法是最快的~ 0.001ms (IE8)，但要注意不同的语义。

也许这对于在代码中引入这种功能的人来说是一种解脱。

2014-03-10 10:24:24

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

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

一个更简洁的解决方案是

$(document).on('keydown', function (e) {
    var key = e == null ? event.keyCode : e.keyCode;
    if(key == 8 && $(document.activeElement.is(':not(:input)')))   //select, textarea
      e.preventDefault();
});

或者，您只能检查if

$(document.activeElement).is('body')

2013-09-26 12:40:48

    document.onkeydown = function (e) {    
        e.stopPropagation();
        if ((e.keyCode==8  ||  e.keyCode==13) &&
            (e.target.tagName != "TEXTAREA") && 
            (e.target.tagName != "INPUT")) { 
            return false;
        }
    };

2011-10-14 21:59:16

我很难找到一个非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，这不是一个问题。

2014-08-02 21:34:24

如何防止退格键导航回?

推荐文章

最新文章

标签