如何防止退格键导航回来?

时间:2009-09-29 22:08:52

标签: javascript jquery internet-explorer firefox cross-browser

在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 bug to change this behavior in webkit

33 个答案:

答案 0 :(得分:323)

此代码解决了这个问题,至少在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;
        }
    }
});

答案 1 :(得分:60)

此代码适用于所有浏览器,并且当不在表单元素上时,或者如果表单元素被禁用,则会吞下退格键。它也是有效的,当它在键入的每个键上执行时很重要。

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

答案 2 :(得分:40)

此处的其他答案已经确定,如果没有允许Backspace的白名单元素,则无法完成此操作。此解决方案并不理想,因为白名单不仅仅是textareas和文本/密码输入,而是反复发现不完整且需要更新。

但是,由于抑制退格功能的目的仅仅是为了防止用户意外丢失数据,因此前置加载解决方案是一个很好的解决方案,因为模式弹出窗口很令人惊讶 - 当模态弹出窗口作为一部分被触发时它们很糟糕标准工作流程,因为用户习惯于在不阅读它们的情况下解雇它们,并且它们很烦人。在这种情况下,模态弹出窗口只会作为罕见且令人惊讶的动作的替代,因此是可以接受的。

问题是,只要用户离开页面(例如点击链接或提交表单),就不会弹出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 +,FireFox,Chrome,Safari和Opera中使用。只需将此函数放入global.js中,然后从不希望用户意外丢失数据的任何页面调用它。

请注意,这不会触发hashchange事件,但是在该上下文中,您可以使用其他技术来防止用户意外丢失数据。

答案 3 :(得分:23)

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

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

答案 4 :(得分:15)

修改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>

答案 5 :(得分:8)

根据评论显示,您希望阻止人们在表单中丢失信息,如果他们按退格键删除但该字段没有聚焦。

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

答案 6 :(得分: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(); 
  } 
});

参考下面这个!

Prevent BACKSPACE from navigating back with jQuery (Like Google's Homepage)

答案 7 :(得分:5)

大多数答案都在jquery中。您可以在纯Javascript中完美地完成此操作,简单且无需库。 This文章对我来说是一个很好的起点,但由于 keyIdentifier 已被弃用,我希望此代码更安全,所以我添加了 || e.keyCode == 8 到if语句。此外,代码在Firefox上运行不正常,所以我添加了 return 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. 简洁,快捷,直截了当。
  5.   

    您可以添加console.log(e);为了您的测试目的,并在Chrome中点击F12,转到“控制台”选项卡并点击页面上的“退格”并查看其中的内容以查看返回的值,然后您可以定位所有这些参数以进一步增强代码以上是为了满足您的需求。

答案 8 :(得分:5)

结合“thetoolman”&amp;&amp ;; “Biff MaGriff”

以下代码似乎在IE 8 / Mozilla / Chrome

中正常运行
$(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();
    });
}); 

答案 9 :(得分:5)

不确定为什么没有人回答这个问题 - 看起来这是一个非常合理的技术问题,无论是否可能。

不,我认为没有跨浏览器方式来禁用退格按钮。我知道这些天默认情况下它没有默认启用。

答案 10 :(得分:3)

稍微详细说明@ erikkallen的excellent answer,这是一个允许所有基于键盘的输入类型的功能,包括those introduced in 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();
    }
});

答案 11 :(得分:3)

我很难找到非JQUERY的答案。感谢Stas把我带到赛道上。

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的答案是最好的。再添加一个条件检查以确保它适用于我*:

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:和Spartan / TechPreview]具有 table-related elements uneditable的“功能”。如果您单击其中一个然后按退格键,它将返回导航。如果您没有可编辑的<td> s,则这不是问题。

答案 12 :(得分:3)

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>

答案 13 :(得分:3)

此解决方案与已发布的其他解决方案类似,但它使用简单的白名单,只需在.is()函数中设置选择器,即可轻松自定义以允许指定元素中的退格。

我在此表单中使用它来防止页面上的退格区导航回来:

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

答案 14 :(得分:2)

我在接受的解决方案和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();
    }
});

Select2创建一个属性为“contentEditable”的Span,对于其中的可编辑组合框,该属性设置为true。我添加了代码以考虑跨度tagName和不同的属性。这解决了我所有的问题。

编辑:如果您没有使用适用于jquery的Select2组合框插件,那么您可能不需要此解决方案,并且接受的解决方案可能会更好。

答案 15 :(得分:1)

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

答案 16 :(得分:1)

此测试在测试时效果很好。

我确实添加了一些代码来处理一些没有用输入标记的输入字段,并集成在为我的工作生成输入表单的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";
      }                              
   }

答案 17 :(得分:1)

我创建了一个NPM项目,其中包含当前接受的(erikkallen)

的干净版本

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

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

  • 没有依赖
  • 支持contenteditable
  • 更易读/可维护的代码库
  • 将得到支持,因为它将在我公司的生产中使用
  • 麻省理工学院执照
{{1}}

答案 18 :(得分:1)

这是我对最高投票答案的重写。我试图检查element.value!== undefined(因为某些元素可能没有html属性,但可能在原型链的某处有一个javascript值属性),但是它没有很好地工作并且有很多优势案例。对于未来证明这一点似乎并不是一个好方法,所以白名单似乎是最好的选择。

这会在事件冒泡阶段结束时注册元素,因此如果您想以任何自定义方式处理Backspace,您可以在其他处理程序中执行此操作。

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

答案 19 :(得分:1)

更简洁的解决方案 -

$(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')

答案 20 :(得分:1)

<强>性能吗

我担心表演并做了一个小提琴:http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

我已经分析了我在这个帖子中找到的最有希望的方法。事实证明,它们都非常快,并且在打字时很可能不会导致“迟缓”问题。 我看过的最慢的方法是IE8中的10.000个呼叫大约125毫秒。每次冲程0.0125ms。

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

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

答案 21 :(得分:1)

纯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”并使用“if(!regex.test(elements))”。第一个对我很好。

答案 22 :(得分:1)

您是否尝试过将以下属性添加到只读文本字段的简单解决方案:

onkeydown =“return false;”

当在只读文本字段中按下Backspace键时,这将使浏览器不再返回历史记录。也许我错过了你的真实意图,但似乎这对你的问题来说是最简单的解决方案。

答案 23 :(得分:1)

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

答案 24 :(得分:1)

阻止按退格键导航的最简单方法

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

答案 25 :(得分:1)

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

答案 26 :(得分:1)

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

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

  }

答案 27 :(得分:0)

我已经在我的代码中使用了一段时间了。我为学生编写在线测试,并在学生在测试期间按退格键时遇到问题,然后将他们带回登录屏幕。令人沮丧!它肯定适用于FF。

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

答案 28 :(得分:0)

为我工作

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

答案 29 :(得分:0)

对于任何有兴趣的人,我都会整合一个jQuery插件,其中包含thetoolman&#39;(以及@ MaffooClock / @ cdmckay&#39;评论)和@ {{3}以上的想法。

用法:

//# Disable backspace on .disabled/.readOnly fields for the whole document
$(document).disableBackspaceNavigation();

//# Disable backspace on .disabled/.readOnly fields under FORMs
$('FORM').disableBackspaceNavigation();

//# Disable backspace on .disabled/.readOnly fields under #myForm
$('#myForm').disableBackspaceNavigation();

//# Disable backspace on .disabled/.readOnly fields for the whole document with confirmation
$(document).disableBackspaceNavigation(true);

//# Disable backspace on .disabled/.readOnly fields for the whole document with all options
$(document).disableBackspaceNavigation({
    confirm: true,
    confirmString: "Are you sure you want to navigate away from this page?",
    excludeSelector: "input, select, textarea, [contenteditable='true']",
    includeSelector: ":checkbox, :radio, :submit"
});

插件:

//# Disables backspace initiated navigation, optionally with a confirm dialog
//#     From: https://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
$.fn.disableBackspaceNavigation = function (vOptions) {
    var bBackspaceWasPressed = false,
        o = $.extend({
            confirm: (vOptions === true),   //# If the caller passed in `true` rather than an Object, default .confirm accordingly,
            confirmString: "Are you sure you want to leave this page?",
            excludeSelector: "input, select, textarea, [contenteditable='true']",
            includeSelector: ":checkbox, :radio, :submit"
        }, vOptions)
    ;

    //# If we are supposed to use the bConfirmDialog, hook the beforeunload event
    if (o.confirm) {
        $(window).on('beforeunload', function () {
            if (bBackspaceWasPressed) {
                bBackspaceWasPressed = false;
                return o.confirmString;
            }
        });
    }

    //# Traverse the passed elements, then return them to the caller (enables chainability)
    return this.each(function () {
        //# Disable backspace on disabled/readonly fields
        $(this).bind("keydown keypress", function (e) {
            var $target = $(e.target /*|| e.srcElement*/);

            //# If the backspace was pressed
            if (e.which === 8 /*|| e.keyCode === 8*/) {
                bBackspaceWasPressed = true;

                //# If we are not using the bConfirmDialog and this is not a typeable input (or a non-typeable input, or is .disabled or is .readOnly), .preventDefault
                if (!o.confirm && (
                    !$target.is(o.excludeSelector) ||
                    $target.is(o.includeSelector) ||
                    e.target.disabled ||
                    e.target.readOnly
                )) {
                    e.preventDefault();
                }
            }
        });
    });
}; //# $.fn.disableBackspaceNavigation

答案 30 :(得分:0)

Sitepoint: Disable back for Javascript

event.stopPropagation()event.preventDefault()在IE中什么都不做。我不得不发送返回event.keyCode == 11(我刚刚选择了一些内容),而不是仅仅说"if not = 8, run the event"才能使其正常工作。 event.returnValue = false也有效。

答案 31 :(得分:0)

使用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>

答案 32 :(得分:0)

到目前为止给出的所有答案都集中在将修补程序编写到网页上,但是如果我只是想要自己的功能而不影响其他用户呢?

在这种情况下,首选浏览器本身的解决方案:
- 自2006年以来Linux上的Firefox“未映射”退格行为,因此它不会受到影响; (无论如何,它只是设置为在此之前向上滚动)
- Chrome刚刚宣布它将从现在开始做同样的事情; (http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/
- 通过进入about:config并将backspace_action设置更改为2,可以将Windows上的Firefox设置为忽略退格; (http://kb.mozillazine.org/Browser.backspace_action
- Safari?!