Como posso impedir que a tecla backspace navegue de volta?

No IE, eu posso fazer isso com o jQuery (terrivelmente fora do padrão, mas funcionando)

if ($.browser.msie)
    $(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});

Mas é possível fazer de uma maneira que funcione no Firefox ou de um modo cruzado para obter um bônus?

Para o registro:

$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });

faz nada.

$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });

resolve o problema, mas torna a chave de backspace inutilizável na página, o que é ainda pior que o comportamento original.

EDIT: A razão pela qual faço isso é que não estou criando uma página da Web simples, mas um aplicativo grande. É incrivelmente chato perder 10 minutos de trabalho só porque você pressionou o backspace no lugar errado. A proporção entre evitar erros e usuários irritantes deve estar muito acima de 1000/1, impedindo que a tecla backspace navegue de volta.

EDIT2: Eu estou não tentar impedir a navegação história, apenas acidentes.

EDIT3: comentário @brentonstrines (movido para cá porque a pergunta é muito popular): Esta é uma 'correção' de longo prazo, mas você pode apoiar seu bug do Chromium para alterar esse comportamento no webkit

Esse código resolve o problema, pelo menos no IE e no Firefox (não testei nenhum outro, mas eu lhe dou uma chance razoável de funcionar se o problema existir em outros navegadores).

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

Esse código funciona em todos os navegadores e engole a tecla backspace quando não estiver em um elemento do formulário ou se o elemento do formulário estiver desativado | readOnly. Também é eficiente, o que é importante quando está sendo executado em todas as chaves digitadas.

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

As outras respostas aqui estabeleceram que isso não pode ser feito sem os elementos da lista de permissões nos quais o Backspace é permitido. Essa solução não é ideal porque a lista de permissões não é tão direta quanto meramente as áreas de texto e as entradas de texto / senha, mas é repetidamente considerada incompleta e precisando ser atualizada.

No entanto, como o objetivo de suprimir a funcionalidade de backspace é meramente impedir que os usuários percam dados acidentalmente, a solução beforeunload é boa porque o pop-up modal é surpreendente - os pop-ups modais são ruins quando acionados como parte de um fluxo de trabalho padrão, porque o usuário se acostuma a dispensá-los sem lê-los, e eles são irritantes. Nesse caso, o pop-up modal apareceria apenas como uma alternativa a uma ação rara e surpreendente e, portanto, é aceitável.

O problema é que um modal onbeforeunload não deve aparecer sempre que o usuário navega para fora da página (como ao clicar em um link ou ao enviar um formulário), e não queremos iniciar a lista de permissões ou a lista negra de condições específicas antes da carga.

A combinação ideal de vantagens e desvantagens para uma solução generalizada é a seguinte: acompanhe se o backspace está pressionado e, somente se necessário, apareça o modal onbeforeunload. Em outras palavras:

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

Isso foi testado para funcionar no IE7 +, FireFox, Chrome, Safari e Opera. Basta soltar essa função no seu global.js e chamá-la de qualquer página em que você não queira que os usuários percam acidentalmente seus dados.

Observe que um modal onbeforeunload pode ser acionado apenas uma vez; portanto, se o usuário pressionar backspace novamente, o modal não será acionado novamente.

Observe que isso não será acionado em eventos de alteração de hash, no entanto, nesse contexto, você pode usar outras técnicas para impedir que os usuários percam acidentalmente seus dados.

Uma solução mais elegante / concisa:

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

Modificação da resposta de erikkallen para abordar diferentes tipos de entrada

Descobri que um usuário empreendedor pode pressionar backspace em uma caixa de seleção ou em um botão de opção em uma tentativa vã de limpá-lo. Em vez disso, eles navegariam para trás e perderiam todos os dados.

Essa alteração deve resolver esse problema.

Nova edição para tratar de divs editáveis ​​de conteúdo

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

Exemplo
Para testar faça 2 arquivos.

starthere.htm - abra isso primeiro para ter um lugar para voltar

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

test.htm - Irá retroceder quando o backspace for pressionado enquanto a caixa de seleção ou o envio estiver focado (alcançado por tabulação). Substitua pelo meu código para corrigir.

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

Com base nos comentários, parece que você deseja impedir que as pessoas percam informações em formulários, se elas pressionarem backspace para excluir, mas o campo não estiver focado.

Nesse caso, você deseja examinar o manipulador de eventos onunload . O Stack Overflow o usa - se você tentar sair de uma página quando começar a escrever uma resposta, será exibido um aviso.

Pare de navegar neste código funciona!

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

Mas para não restringir os campos de texto, mas outros

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

Para evitá-lo para um campo específico, basta usar

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

Referindo-se a este abaixo!

Impedir que o BACKSPACE navegue de volta com o jQuery (como a página inicial do Google)

A maioria das respostas está em jquery. Você pode fazer isso perfeitamente em Javascript puro, simples e sem necessidade de biblioteca. Este artigo foi um bom ponto de partida para mim, mas como keyIdentifier está obsoleto, eu queria que esse código fosse mais seguro, então adicionei || e.keyCode == 8 à instrução if. Além disso, o código não estava funcionando bem no Firefox, então adicionei return false; e agora funciona perfeitamente bem. Aqui está:

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

Esse código funciona muito bem porque,

1. Está em javascript puro (nenhuma biblioteca é necessária).
2. Não apenas verifica a tecla pressionada, mas também confirma se a ação é realmente uma ação de "retorno" do navegador.
3. Juntamente com o acima, o usuário pode digitar e excluir texto das caixas de texto de entrada na página da Web sem problemas, enquanto ainda impede a ação do botão Voltar.
4. É curto, limpo, rápido e direto ao ponto.

Você pode adicionar console.log (e); para seus objetivos de teste, e pressione F12 no chrome, vá para a guia "console" e pressione "backspace" na página e olhe dentro dela para ver quais valores são retornados. Em seguida, você pode direcionar todos esses parâmetros para aprimorar ainda mais o código acima para atender às suas necessidades.

Combinando soluções fornecidas por "thetoolman" e& "Biff MaGriff"

O código a seguir parece funcionar corretamente no 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();
    });
}); 

Não sei por que ninguém acabou de responder a isso - parece uma pergunta técnica perfeitamente razoável para perguntar se é possível.

Não, não acho que exista uma maneira entre navegadores de desativar o botão backspace. Sei que não está habilitado por padrão no FF atualmente.

Foi difícil encontrar uma resposta que não fosse JQUERY. Agradeço a Stas por me colocar na pista.

Chrome: se você não precisar de suporte entre navegadores, basta usar uma lista negra, em vez da lista de permissões. Esta versão JS pura funciona no Chrome, mas não no IE. Não tenho certeza sobre FF.

No Chrome (versão 36, meados de 2014), os pressionamentos de tecla que não estão em um elemento de entrada ou conteúdo editável parecem ser direcionados <BODY>. Isso possibilita o uso de uma lista negra, que eu prefiro na lista de permissões. O IE usa o destino do último clique - portanto, pode ser um div ou qualquer outra coisa. Isso torna isso inútil no 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();
        }
    }
}  

Navegador Cruzado: para javascript puro, achei a resposta da Stas a melhor. A adição de mais uma verificação de condição para contenteditable fez com que funcionasse para mim *:

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

* Observe que os IEs [edit: e Spartan / TechPreview] têm um "recurso" que torna os elementos relacionados à tabela não editáveis . Se você clicar em um deles e, em seguida, pressionar backspace, ele voltará. Se você não possui <td>s editáveis , isso não é problema.

Essa solução é semelhante a outras postadas, mas usa uma lista de desbloqueio simples, tornando-a facilmente personalizável para permitir o backspace em elementos especificados, basta definir o seletor na função .is ().

Eu o uso neste formulário para impedir que o backspace nas páginas navegue de volta:

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

Para elaborar um pouco a excelente resposta de @ erikkallen , aqui está uma função que permite todos os tipos de entrada baseados em teclado, incluindo os introduzidos no 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();
    }
});

Maneira do jQuery do JavaScript -:

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

Javascript - a maneira nativa, que funciona para mim:

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

Eu tive alguns problemas com a solução aceita e o plug-in Select2.js; Não pude excluir caracteres na caixa editável porque a ação de exclusão estava sendo impedida. Esta foi a minha solução:

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

O Select2 cria um Span com um atributo "contentEditable", definido como true para a caixa de combinação editável. Eu adicionei o código para levar em conta o spanName tagName e o atributo diferente. Isso resolveu todos os meus problemas.

Edit: Se você não estiver usando o plug-in de caixa de combinação Select2 para jquery, essa solução poderá não ser necessária e a solução aceita poderá ser melhor.

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

Este código resolve o problema em todos os navegadores:

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

  }

Maneira mais simples de impedir a navegação ao pressionar backspace

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

Usando o Dojo toolkit 1.7, isso funciona no 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()});
});

Você já tentou a solução muito simples de adicionar o seguinte atributo ao seu campo de texto somente leitura:

onkeydown = "return false;"

Isso impedirá que o navegador volte no histórico quando a tecla Backspace for pressionada em um campo de texto somente leitura. Talvez eu esteja perdendo sua verdadeira intenção, mas parece que essa seria a solução mais simples para o seu problema.

Uma solução muito mais limpa -

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

Como alternativa, você só pode verificar se

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

Versão javascript pura, que funciona em todos os navegadores:

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

Claro que você pode usar "INPUT, TEXTAREA" e usar "if (! Regex.test (elements))" então. O primeiro funcionou bem para mim.

Atuação?

Eu estava preocupado com o desempenho e criei um violino: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

Analisei os métodos mais promissores que encontrei neste tópico. Acontece que todos eles foram muito rápidos e provavelmente não causam problemas em termos de "lentidão" ao digitar. O método mais lento que eu observei foi de cerca de 125 ms para 10.000 chamadas no IE8. Qual é 0,0125ms por curso.

Eu achei os métodos postados por Codenepal e Robin Maben os mais rápidos ~ 0.001ms (IE8), mas cuidado com as semânticas diferentes.

Talvez isso seja um alívio para alguém que introduz esse tipo de funcionalidade em seu código.

Resposta erikkallen modificada:

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

Esta solução funcionou muito bem quando testada.

Eu adicionei algum código para lidar com alguns campos de entrada não marcados com entrada e para integrar um aplicativo Oracle PL / SQL que gera um formulário de entrada para o meu trabalho.

Meus dois centavos":

 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";
      }                              
   }

Criei um projeto NPM com uma versão limpa do atualmente aceito (de erikkallen)

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

Ele usa basicamente os mesmos princípios, mas:

• Sem dependência
• Suporte para conteúdo editável
• Base de código mais legível / sustentável
• Será suportado, pois será utilizado na produção pela minha empresa
• Licença 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);
};

Aqui está minha reescrita da resposta mais votada. Tentei verificar element.value! == indefinido (já que alguns elementos como podem não ter atributo html, mas podem ter uma propriedade de valor javascript em algum lugar da cadeia de protótipos), no entanto, isso não funcionou muito bem e teve muitos casos de borda. Não parece haver uma boa maneira de fazer isso à prova do futuro; portanto, uma lista de permissões parece ser a melhor opção.

Isso registra o elemento no final da fase de bolha do evento; portanto, se você quiser manipular o Backspace de qualquer maneira personalizada, poderá fazê-lo em outros manipuladores.

Isso também verifica a instância do HTMLTextAreElement, pois, teoricamente, é possível ter um componente da Web que herda disso.

Isso não verifica o contentEditable (combine com outras respostas).

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

Ponto do site: desativar novamente para Javascript

event.stopPropagation()e event.preventDefault()não faça nada no IE. Eu tive que enviar retorno event.keyCode == 11(eu só peguei algo) em vez de apenas dizer "if not = 8, run the event"para fazê-lo funcionar, no entanto. event.returnValue = falsetambém funciona.

Outro método usando 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>

Estou usando isso no meu código há algum tempo. Escrevo testes on-line para os alunos e me deparei com o problema quando eles pressionavam o backspace durante o teste, e isso os levava de volta à tela de login. Frustrante! Funciona no FF, com certeza.

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