Como desabilitar tecla "Backspace" de voltar página do navegador com jQuery

É bem provável que você já tenha retornado à página anterior sem querer ao editar um campo de formulário e, acidentalmente, pressionou a tecla Backspace. Às vezes, isso acontece por clicar fora do campo ou até mesmo ao pressionar a tecla Tab erroneamente. Independente da razão, quando o campo perde o foco e pressionamos a tecla Backspace, o navegador volta à página anterior e muitas vezes perdemos todo o progresso do preenchimento do formulário.

Felizmente, é possível evitar esse problema utilizando jQuery. Na verdade, existe uma solução bem simples para isso, que consiste em detectar as teclas que estão sendo pressionadas e desabilitar o uso do Backspace para essa finalidade. Vejamos o código abaixo:

// detecta todas as teclas que estão sendo pressionadas
$(document).unbind('keydown').bind('keydown', function (event) {
    
    // filtra apenas a tecla <backspace>
    if (event.keyCode === 8) {
        
        // variável que decidirá se a tecla será bloqueada
        var doPrevent = true;
        
        // tipos de campos permitidos
        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");
        
        // checa se está nos campos permitidos e libera o <backspace> para edição
        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;
            }
        }
        
        // bloqueia a tecla
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

Com o código acima, o problema de retornar à página anterior usando a tecla Backspace será resolvido, tanto no Internet Explorer quanto no Firefox.

No caso do Chrome, existe ainda uma extensão que você pode instalar para desabilitar essa funcionalidade em todos os sites, pois fica desabilitado a nível de configuração do navegador.

Atualização (30/07/2023)

Atualmente a função de voltar a página anterior com a tecla "Backspace foi removida dos navegadores. Dessa forma, isso já não é mais uma preocupação real.