如何防止退格键导航回?

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

当前回答

这段代码适用于所有浏览器，当不在表单元素上时，或者当表单元素被禁用|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();
            }
        }
    });
});

2011-11-21 20:49:46

其他回答

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

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

2009-09-29 23:23:39

一个更优雅/简洁的解决方案:

$(document).on('keydown',function(e){
  var $target = $(e.target||e.srcElement);
  if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
  {
    e.preventDefault();
  }
})

2013-10-25 12:17:13

    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

JavaScript - jQuery方式:

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

Javascript -本地的方式，这为我工作:

<script type="text/javascript">

//on backspace down + optional callback
function onBackspace(e, callback){
    var key;
    if(typeof e.keyIdentifier !== "undefined"){
        key = e.keyIdentifier;

    }else if(typeof e.keyCode !== "undefined"){
        key = e.keyCode;
    }
    if (key === 'U+0008' || 
        key === 'Backspace' || 
        key === 8) {
                    if(typeof callback === "function"){
                callback();
            }
            return true;
        }
    return false;
}

//event listener
window.addEventListener('keydown', function (e) {

    switch(e.target.tagName.toLowerCase()){
        case "input":
        case "textarea":
        break;
        case "body":
            onBackspace(e,function(){
                e.preventDefault();
            });

        break;
    }
}, true);
</script>

2014-10-24 07:50:33

修正的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

如何防止退格键导航回?

推荐文章

最新文章

标签