我怎样才能防止导航回退格键?(How can I prevent the backspace key

2019-07-20 03:55发布

在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。

EDIT2:我不会试图阻止历史记录导航,只是意外。

EDIT3:@brentonstrines评论(搬到这里,因为这个问题是如此受欢迎):这是一个长期的“修复”,但你可以扔在你的背后支持的Chromium错误更改webkit的这种行为

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


Answer 2:

此代码工作在所有浏览器和燕子的时候不是一个表单元素上,或者如果表单元素被禁用退格键|只读。 这也是有效的,当它被执行在输入每一个关键这是非常重要的。

$(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();
            }
        }
    });
});


Answer 3:

其他答案在这里已经建立,这离不开白名单,其中退格键是允许的元素来完成。 这种解决方案并不理想,因为白名单并非仅仅是文本域和文本/密码输入那样简单,而是多次发现不全,需要进行更新。

然而,由于抑制退格功能的目的仅仅是为了防止用户意外丢失数据,该beforeunload解决方案是一个很好的,因为模式弹出是令人惊讶的 - 模态弹出窗口是坏的,当他们被触发作为一个标准的工作流的一部分,因为用户习惯于解雇他们没有阅读他们,他们是讨厌。 在这种情况下,模式弹出只会出现作为替代一种罕见的和令人惊讶的作用,因此是可以接受的。

问题是,每当用户导航离开该页面的onbeforeunload模式不能弹出(例如点击一个链接时,或提交形式),而我们不希望启动白名单或黑名单特定onbeforeunload条件。

权衡的一个广义的解决方案的理想组合如下:跟踪退格是否被按下,只有弹出onbeforeunload模式,如果它是。 换一种说法:

function confirmBackspaceNavigations () {
    // http://stackoverflow.com/a/22949859/2407309
    var backspaceIsPressed = false
    $(document).keydown(function(event){
        if (event.which == 8) {
            backspaceIsPressed = true
        }
    })
    $(document).keyup(function(event){
        if (event.which == 8) {
            backspaceIsPressed = false
        }
    })
    $(window).on('beforeunload', function(){
        if (backspaceIsPressed) {
            backspaceIsPressed = false
            return "Are you sure you want to leave this page?"
        }
    })
} // confirmBackspaceNavigations

这已经过测试,在IE7 +,火狐,Chrome,Safari和Opera的工作。 只需拖放这个功能到你的global.js并从任何页面,您不希望用户意外丢失了数据调用它。

请注意,这不会触发hashchange事件,然而在这种情况下,你可以使用其他技术来防止用户不小心丢失其数据。



Answer 4:

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

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


Answer 5:

erikkallen的答案进行修改,以解决不同的输入类型

我发现,一个积极进取的用户可能在复选框或妄图将其清除一个单选按钮,按空格键,相反他们会向后导航,并失去所有的数据。

这种变化应该解决这个问题。

新的编辑处理的内容编辑的div

    //Prevents backspace except in the case of textareas and text inputs to prevent user navigation.
    $(document).keydown(function (e) {
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            switch (d.tagName.toUpperCase()) {
                case 'TEXTAREA':
                    preventKeyPress = d.readOnly || d.disabled;
                    break;
                case 'INPUT':
                    preventKeyPress = d.readOnly || d.disabled ||
                        (d.attributes["type"] && $.inArray(d.attributes["type"].value.toLowerCase(), ["radio", "checkbox", "submit", "button"]) >= 0);
                    break;
                case 'DIV':
                    preventKeyPress = d.readOnly || d.disabled || !(d.attributes["contentEditable"] && d.attributes["contentEditable"].value == "true");
                    break;
                default:
                    preventKeyPress = true;
                    break;
            }
        }
        else
            preventKeyPress = false;

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


为了测试做2个文件。

starthere.htm - 让你有个地方要回去先开这个

<a href="./test.htm">Navigate to here to test</a>

TEST.HTM - 当在复选框按退格键这将向后导航或提交具有焦点(由tab键来实现)。 我的代码来修复更换。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).keydown(function(e) {
        var doPrevent;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
                doPrevent = d.readOnly || d.disabled;
            }
            else
                doPrevent = true;
        }
        else
            doPrevent = false;

        if (doPrevent)
            e.preventDefault();
    });
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</body>
</html>


Answer 6:

根据该意见似乎要阻止人们在形式丢失信息,如果他们按空格键来删除,但该领域不集中。

在这种情况下,你想看看onunload事件处理程序。 堆栈溢出使用它 - 如果你想离开一个网页,当你开始写一个答案,它会弹出一个警告。



Answer 7:

从导航此代码的工作住手!

$(document).on("keydown", function (event) {        
   if (event.keyCode === 8) {
      event.preventDefault();
    }
  });

但不限制的文本字段,但其他

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

为了防止对特定领域的简单的使用

$('#myOtherField').on("keydown", function (event) {
  if (event.keyCode === 8 || event.which === 8) { 
   event.preventDefault(); 
  } 
});

参考下面这一个!

从导航回到与jQuery防止退格(如谷歌的主页)



Answer 8:

不知道为什么没有人只是回答了这一点 - 似乎是一个完全合理的技术问题要问是否有可能。

不,我不认为有一个跨浏览器的方式来禁用退格键。 我知道这是不是在默认情况下启用FF,虽然这些天。



Answer 9:

通过结合“thetoolman” &&“比夫MaGriff”给出的解决方案

以下代码似乎在IE 8 / Mozilla浏览器/铬正常工作

$(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();
    });
}); 


Answer 10:

大部分的答案是jQuery中。 您可以在纯JavaScript,简单,没有所需的库完美地做到这一点。 此文章是对我来说是很好的起点,但由于keyIdentifier已过时,我希望这个代码是更安全的,所以我说|| e.keyCode == 8 if语句。 另外,该代码没有在Firefox上运行良好,所以我说返回false; 现在它工作得很好。 这里是:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+0008'||e.keyIdentifier=='Backspace'||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);
</script>

此代码的伟大工程,因为,

  1. 它是纯JavaScript(不需要库)。
  2. 它不仅检查按下的键,确认动作是否真的是一个浏览器“返回”行动。
  3. 连同上面,用户可以键入和删除网页上输入文本框的文本没有任何问题,同时还防止后退按钮的动作。
  4. 它是短暂的,干净,快捷,开门见山。

您可以添加的console.log(E); 为您的测试目的,并创下F12铬,进入“控制台”选项卡,然后点击“退格”页面上,看看里面看到返回什么样的价值观,那么你就可以针对所有这些参数的进一步增强的代码以上,以满足您的需求。



Answer 11:

该解决方案是类似于已张贴他人,但它只是通过设置。就是选择()函数使用一个简单的白名单使得它易于定制,允许在指定的元素退格。

我用它以这种形式,以防止从导航回到页面退格:

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


Answer 12:

要在@ 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();
    }
});


Answer 13:

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>


Answer 14:

我有一个很难找到一个非JQUERY答案。 由于斯塔斯为把我在赛道上。

铬:如果您不需要跨浏览器支持,你可以只使用一个黑名单,而不是白名单。 这种纯JS版Chrome浏览器的工作原理,但不是在IE浏览器。 不知道FF。

在铬(版本36,2014年年中),按键不是在输入或CONTENTEDITABLE元件似乎成靶向<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,我发现斯塔斯的回答是最好的。 增加对CONTENTEDITABLE一个条件支票它为我工作*:

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的[编辑:和Spartan / TechPreview]有一个“功能”,使表相关的元素不可编辑 。 如果你点击其中的一个,然后按空格键,它会向后导航。 如果你没有做编辑<td> S,这是不是一个问题。



Answer 15:

我遇到了一些问题,接受的解决方案和Select2.js插件; 我是不是能够为被阻止删除操作是在编辑框中删除字符。 这是我的解决方案:

//Prevent backwards navigation when trying to delete disabled text.
$(document).unbind('keydown').bind('keydown', function (event) {

    if (event.keyCode === 8) {

        var doPrevent = false,
            d = event.srcElement || event.target,
            tagName = d.tagName.toUpperCase(),
            type = (d.type ? d.type.toUpperCase() : ""),
            isEditable = d.contentEditable,
            isReadOnly = d.readOnly,
            isDisabled = d.disabled;

        if (( tagName === 'INPUT' && (type === 'TEXT' || type === 'PASSWORD'))
            || tagName === 'PASSWORD'
            || tagName === 'TEXTAREA') {
            doPrevent =  isReadOnly || isDisabled;
        }
        else if(tagName === 'SPAN'){
            doPrevent = !isEditable;
        }
        else {
            doPrevent = true;
        }
    }

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

选择二产生与被设置为true在它的编辑组合框“CONTENTEDITABLE”的属性的跨度。 我添加了代码以占跨度标记名,不同的属性。 这解决了我的所有问题。

编辑:如果你不使用的jQuery的选择二组合框插件,则可能不被你需要这个解决方案,并接受的解决方案可能会更好。



Answer 16:

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


Answer 17:

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

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

  }


Answer 18:

最简单的,以防止在按Backspace键导航方式

$(document).keydown(function () {
    if (event.keyCode == 8) {
        if (event.target.nodeName == 'BODY') {
            event.preventDefault();
        }
    }
});


Answer 19:

使用Dojo工具包1.7,这部作品在IE 8:

require(["dojo/on", "dojo/keys", "dojo/domReady!"],
function(on, keys) {
    on(document.body,"keydown",function(evt){if(evt.keyCode == keys.BACKSPACE)evt.preventDefault()});
});


Answer 20:

你有没有尝试过的只是添加下列属性的只读文本字段非常简单的解决方案:

的onkeydown = “返回false;”

这将使浏览器时,Backspace键在只读文本字段被压回去的历史。 也许我错过了你的真实意图,但看起来这将是您的问题最简单的办法。



Answer 21:

了一个非常巧妙的解决方案 -

$(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();
});

或者,你可以只检查

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


Answer 22:

纯JavaScript版本,它在所有浏览器的工作原理:

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 (regex.test(elements)) {
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
    }
  }
}

当然你也可以使用“INPUT,TEXTAREA”,并使用“如果(!regex.test(元素))”即可。 我的第一个工作的罚款。



Answer 23:

性能?

我很担心性能,并提出了小提琴: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

我分析了最有前途的方法,我在这个线程中。 事实证明,他们都非常快,最有可能打字时不“呆滞”的方面产生问题。 我看着最慢的方法是在IE8 10.000通话约125毫秒。 这是每个行程0.0125ms。

我发现发表Codenepal和罗宾Maben方法是最快的〜0.001ms的(IE8),但要注意不同的语义。

也许这是一种解脱,有人介绍这种功能,以他的代码。



Answer 24:

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


Answer 25:

测试时,该解决方案的工作非常出色。

我也添加一些代码来处理没有被标注为输入一些输入字段,并在生成我的工作输入表单一个Oracle PL / SQL应用程序集成。

我的“两分钱”:

 if (typeof window.event != ''undefined'')
    document.onkeydown = function() {
    //////////// IE //////////////
    var src = event.srcElement;
    var tag = src.tagName.toUpperCase();
    if (event.srcElement.tagName.toUpperCase() != "INPUT"
        && event.srcElement.tagName.toUpperCase() != "TEXTAREA"
        || src.readOnly || src.disabled 
        )
        return (event.keyCode != 8);
    if(src.type) {
       var type = ("" + src.type).toUpperCase();
       return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
       }
   }
else
   document.onkeypress = function(e) {
   //////////// FireFox 
   var src = e.target;
   var tag = src.tagName.toUpperCase();
   if ( src.nodeName.toUpperCase() != "INPUT" && tag != "TEXTAREA"
      || src.readOnly || src.disabled )
      return (e.keyCode != 8);
    if(src.type) {
      var type = ("" + src.type).toUpperCase();
      return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
      }                              
   }


Answer 26:

我创建了一个NPM项目用干净的版本目前公认的(erikkallen的)

https://github.com/slorber/backspace-disabler

它采用基本相同的原则,但是:

  • 无依赖性
  • 对于CONTENTEDITABLE支持
  • 更可读/维护的代码基础
  • 因为它会在生产中由我公司使用将得到支持
  • MIT许可证

var Backspace = 8;

// See http://stackoverflow.com/questions/12949590/how-to-detach-event-in-ie-6-7-8-9-using-javascript
function addHandler(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}
function removeHandler(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
}




// Test wether or not the given node is an active contenteditable,
// or is inside an active contenteditable
function isInActiveContentEditable(node) {
    while (node) {
        if ( node.getAttribute && node.getAttribute("contenteditable") === "true" ) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}



var ValidInputTypes = ['TEXT','PASSWORD','FILE','EMAIL','SEARCH','DATE'];

function isActiveFormItem(node) {
    var tagName = node.tagName.toUpperCase();
    var isInput = ( tagName === "INPUT" && ValidInputTypes.indexOf(node.type.toUpperCase()) >= 0 );
    var isTextarea = ( tagName === "TEXTAREA" );
    if ( isInput || isTextarea ) {
        var isDisabled = node.readOnly || node.disabled;
        return !isDisabled;
    }
    else if ( isInActiveContentEditable(node) ) {
        return true;
    }
    else {
        return false;
    }
}


// See http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
function disabler(event) {
    if (event.keyCode === Backspace) {
        var node = event.srcElement || event.target;
        // We don't want to disable the ability to delete content in form inputs and contenteditables
        if ( isActiveFormItem(node) ) {
            // Do nothing
        }
        // But in any other cases we prevent the default behavior that triggers a browser backward navigation
        else {
            event.preventDefault();
        }
    }
}


/**
 * By default the browser issues a back nav when the focus is not on a form input / textarea
 * But users often press back without focus, and they loose all their form data :(
 *
 * Use this if you want the backspace to never trigger a browser back
 */
exports.disable = function(el) {
    addHandler(el || document,"keydown",disabler);
};

/**
 * Reenable the browser backs
 */
exports.enable = function(el) {
    removeHandler(el || document,"keydown",disabler);
};


Answer 27:

这里是我的得票最多的答案重写。 我试图检查element.value!==未定义(因为像一些元素可能没有HTML属性,但可以有一个JavaScript值属性某处原型链),但没有工作非常好,有很多的边缘情况。 似乎没有成为面向未来的一个很好的方式,让白名单似乎是最好的选择。

这将注册在事件冒泡阶段结束的元素,所以如果你想处理退格的任何自定义的方式,你可以在其他处理器这么做。

这也检查的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


Answer 28:

Sitepoint:禁用回来的Javascript

event.stopPropagation()event.preventDefault()什么也不做的IE浏览器。 我只好送返回event.keyCode == 11 (我刚捡到的东西),而不是只是说"if not = 8, run the event" ,使其工作,虽然。 event.returnValue = false也适用。



Answer 29:

使用jquery另一种方法

    <script type="text/javascript">

    //set this variable according to the need within the page
    var BACKSPACE_NAV_DISABLED = true;

    function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
    function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}

    $(document).ready(function(){ 
        if(BACKSPACE_NAV_DISABLED){
            //for IE use keydown, for Mozilla keypress  
            //as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
            $(document).keypress(fnPreventBackspace);
            $(document).keydown(fnPreventBackspace);

            //Allow Backspace is the following controls 
            var jCtrl = null;
            jCtrl = $('input[type="text"]');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            jCtrl = $('input[type="password"]');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            jCtrl = $('textarea');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            //disable backspace for readonly and disabled
            jCtrl = $('input[type="text"][readonly="readonly"]')
            jCtrl.keypress(fnPreventBackspace);
            jCtrl.keydown(fnPreventBackspace);

            jCtrl = $('input[type="text"][disabled="disabled"]')
            jCtrl.keypress(fnPreventBackspace);
            jCtrl.keydown(fnPreventBackspace);
        }
    }); 

    </script>


Answer 30:

我已经在我的一段时间码,现在用这个。 我写的学生在线测试跑进问题,当学生们自己在测试期间,按Backspace键,它会带他们返回到登录屏幕。 令人沮丧! 它适用于FF是肯定的。

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


文章来源: How can I prevent the backspace key from navigating back?