Comment empêcher la touche de retour arrière de revenir en arrière?

Sur IE, je peux le faire avec jQuery (terriblement non standard, mais qui fonctionne)

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

Mais est-il possible de faire d'une manière qui fonctionne sur Firefox, ou d'une manière multi-navigateur pour un bonus?

Pour mémoire:

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

ne fait rien.

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

résout le problème, mais rend la clé de retour arrière inutilisable sur la page, ce qui est encore pire que le comportement d'origine.

EDIT: La raison pour laquelle je fais cela est que je ne crée pas une simple page Web mais une grande application. C'est incroyablement ennuyeux de perdre 10 minutes de travail simplement parce que vous avez appuyé sur la touche de retour au mauvais endroit. Le rapport entre la prévention des erreurs et les utilisateurs ennuyeux devrait être bien supérieur à 1000/1 en empêchant la touche de retour arrière de revenir en arrière.

EDIT2: Je n'essaie pas d'empêcher la navigation dans l'historique, juste les accidents.

EDIT3: Commentaire @brentonstrines (déplacé ici car la question est si populaire): il s'agit d'un «correctif» à long terme, mais vous pouvez apporter votre soutien derrière le bogue Chromium pour changer ce comportement dans le webkit

Ce code résout le problème, au moins dans IE et Firefox (je n'en ai testé aucun autre, mais je lui donne une chance raisonnable de fonctionner si le problème existe même dans d'autres navigateurs).

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

Ce code fonctionne sur tous les navigateurs et avale la touche de retour arrière lorsqu'il n'est pas sur un élément de formulaire, ou si l'élément de formulaire est désactivé | en lecture seule. Il est également efficace, ce qui est important lorsqu'il s'exécute sur chaque clé tapée.

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

Les autres réponses ici ont établi que cela ne peut pas être fait sans liste blanche dans laquelle le retour arrière est autorisé. Cette solution n'est pas idéale car la liste blanche n'est pas aussi simple que les simples zones de texte et les entrées de texte / mot de passe, mais elle se révèle à plusieurs reprises incomplète et doit être mise à jour.

Cependant, puisque le but de supprimer la fonctionnalité de retour arrière est simplement d'empêcher les utilisateurs de perdre accidentellement des données, la solution beforeunload est bonne car la fenêtre contextuelle modale est surprenante - les fenêtres contextuelles modales sont mauvaises lorsqu'elles sont déclenchées dans le cadre d'un flux de travail standard, parce que l'utilisateur s'habitue à les rejeter sans les lire, et ils sont ennuyeux. Dans ce cas, la popup modale n'apparaîtrait que comme une alternative à une action rare et surprenante, et est donc acceptable.

Le problème est qu'un modal onbeforeunload ne doit pas apparaître chaque fois que l'utilisateur s'éloigne de la page (comme en cliquant sur un lien ou en soumettant un formulaire), et nous ne voulons pas commencer à mettre sur liste blanche ou sur liste noire des conditions onbeforeunload spécifiques.

La combinaison idéale de compromis pour une solution généralisée est la suivante: gardez une trace si le retour arrière est pressé, et ne faites apparaître le modal onbeforeunload que si c'est le cas. En d'autres termes:

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

Cela a été testé pour fonctionner dans IE7 +, FireFox, Chrome, Safari et Opera. Déposez simplement cette fonction dans votre global.js et appelez-la depuis n'importe quelle page où vous ne voulez pas que les utilisateurs perdent accidentellement leurs données.

Notez qu'un modal onbeforeunload ne peut être déclenché qu'une seule fois, donc si l'utilisateur appuie à nouveau sur le retour arrière, le modal ne se déclenchera plus.

Notez que cela ne se déclenchera pas lors d'événements de hachage, mais dans ce contexte, vous pouvez utiliser d'autres techniques pour empêcher les utilisateurs de perdre accidentellement leurs données.

Une solution plus élégante / concise:

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

Modification de la réponse d'erikkallen pour répondre à différents types d'entrée

J'ai trouvé qu'un utilisateur entreprenant pouvait appuyer sur la touche de retour arrière sur une case à cocher ou un bouton radio dans une vaine tentative pour la désactiver et à la place, il reculerait et perdrait toutes ses données.

Ce changement devrait résoudre ce problème.

Nouvelle modification pour traiter les divs modifiables du contenu

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

Exemple
Pour tester créer 2 fichiers.

starthere.htm - ouvrez-le d'abord pour avoir un endroit où revenir

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

test.htm - Cela permet de revenir en arrière lorsque vous appuyez sur la touche de retour arrière alors que la case à cocher ou la soumission a le focus (obtenue par tabulation). Remplacez par mon code pour corriger.

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

Sur la base des commentaires, il semble que vous souhaitiez empêcher les gens de perdre des informations dans les formulaires, s'ils appuient sur la touche de retour arrière pour supprimer mais que le champ n'est pas ciblé.

Dans ce cas, vous souhaitez consulter le gestionnaire d' événements onunload . Stack Overflow l'utilise - si vous essayez de quitter une page lorsque vous avez commencé à écrire une réponse, un avertissement s'affiche.

Arrêtez de naviguer ce code fonctionne!

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

Mais pour ne pas restreindre les champs de texte mais d'autres

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

Pour l'empêcher pour un champ spécifique, utilisez simplement

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

Se référant à celui-ci ci-dessous!

Empêcher BACKSPACE de revenir en arrière avec jQuery (comme la page d'accueil de Google)

La plupart des réponses sont en jquery. Vous pouvez le faire parfaitement en Javascript pur, simple et sans bibliothèque requise. Cet article était un bon point de départ pour moi, mais comme keyIdentifier est obsolète, je voulais que ce code soit plus sécurisé, j'ai donc ajouté || e.keyCode == 8 à l'instruction if. De plus, le code ne fonctionnait pas bien sur Firefox, j'ai donc ajouté return false; et maintenant ça marche parfaitement bien. C'est ici:

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

Ce code fonctionne très bien car,

1. Il est en pur javascript (aucune bibliothèque requise).
2. Non seulement il vérifie la touche enfoncée, mais il confirme si l'action est vraiment une action "retour" du navigateur.
3. Avec ce qui précède, l'utilisateur peut taper et supprimer du texte des zones de texte d'entrée sur la page Web sans aucun problème tout en empêchant l'action du bouton de retour.
4. Il est court, propre, rapide et droit au but.

Vous pouvez ajouter console.log (e); pour vos besoins de test, et appuyez sur F12 en chrome, allez dans l'onglet "console" et appuyez sur "backspace" sur la page et regardez à l'intérieur pour voir quelles valeurs sont retournées, puis vous pouvez cibler tous ces paramètres pour améliorer encore le code ci-dessus pour répondre à vos besoins.

Combiner les solutions proposées par "thetoolman" && "Biff MaGriff"

le code suivant semble fonctionner correctement dans 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();
    });
}); 

Je ne sais pas pourquoi personne ne vient de répondre à cela - cela semble être une question technique parfaitement raisonnable pour demander si c'est possible.

Non, je ne pense pas qu'il existe un moyen multi-navigateur pour désactiver le bouton de retour arrière. Je sais que ce n'est pas activé par défaut dans FF ces jours-ci.

J'ai eu du mal à trouver une réponse non JQUERY. Merci à Stas de m'avoir mis sur la piste.

Chrome: si vous n'avez pas besoin de la prise en charge de plusieurs navigateurs, vous pouvez simplement utiliser une liste noire, plutôt qu'une liste blanche. Cette version JS pure fonctionne dans Chrome, mais pas dans IE. Pas sûr de FF.

Dans Chrome (version 36, mi-2014), les pressions de touches qui ne se trouvent pas sur une entrée ou un élément modifiable semblent être ciblées <BODY>. Cela permet d'utiliser une liste noire, que je préfère à la liste blanche. IE utilise la cible du dernier clic - il peut donc s'agir d'un div ou de toute autre chose. Cela rend cela inutile dans 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();
        }
    }
}  

Cross Browser: Pour le javascript pur, j'ai trouvé que la réponse de Stas était la meilleure. L'ajout d'une vérification de condition supplémentaire pour contenteditable l'a fait fonctionner pour moi *:

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

* Notez que les IE [edit: et Spartan / TechPreview] ont une "fonctionnalité" qui rend les éléments liés aux tables non modifiables . Si vous cliquez sur l'un de ceux-ci et PUIS appuyez sur retour arrière, il reviendra en arrière. Si vous n'avez pas de modifiables <td>, ce n'est pas un problème.

Cette solution est similaire à d'autres qui ont été publiées, mais elle utilise une simple liste blanche la rendant facilement personnalisable pour autoriser le retour arrière dans les éléments spécifiés simplement en définissant le sélecteur dans la fonction .is ().

Je l'utilise sous cette forme pour empêcher le retour arrière sur les pages de revenir en arrière:

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

Pour élaborer un peu sur l' excellente réponse de @ erikkallen , voici une fonction qui permet tous les types d'entrée basés sur le clavier, y compris ceux introduits en 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();
    }
});

JavaScript - manière jQuery:

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

Javascript - la manière native, qui fonctionne pour moi:

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

J'ai eu quelques problèmes avec la solution acceptée et le plugin Select2.js; Je n'ai pas pu supprimer les caractères dans la zone modifiable car l'action de suppression était empêchée. C'était ma solution:

//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 crée un Span avec un attribut "contentEditable" qui est défini sur true pour la zone de liste modifiable modifiable qu'il contient. J'ai ajouté du code pour prendre en compte les étendues tagName et les différents attributs. Cela a résolu tous mes problèmes.

Edit: Si vous n'utilisez pas le plugin Select2 combobox pour jquery, alors cette solution peut ne pas être nécessaire par vous, et la solution acceptée pourrait être meilleure.

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

Ce code résout le problème dans tous les navigateurs:

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

  }

Moyen le plus simple d'empêcher la navigation en appuyant sur la touche de retour arrière

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

En utilisant Dojo toolkit 1.7, cela fonctionne dans 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()});
});

Avez-vous essayé la solution très simple consistant simplement à ajouter l'attribut suivant à votre champ de texte en lecture seule:

onkeydown = "return false;"

Cela empêchera le navigateur de revenir dans l'historique lorsque la touche Retour arrière est enfoncée dans un champ de texte en lecture seule. Peut-être que je manque votre véritable intention, mais il semble que ce serait la solution la plus simple à votre problème.

Une solution beaucoup plus soignée -

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

Alternativement, vous ne pouvez vérifier que si

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

Version javascript pur, qui fonctionne dans tous les navigateurs:

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

Bien sûr, vous pouvez utiliser "INPUT, TEXTAREA" et utiliser "if (! Regex.test (elements))" alors. Le premier a bien fonctionné pour moi.

Performance?

J'étais inquiet pour les performances et j'ai fait un violon: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

J'ai analysé les méthodes les plus prometteuses que j'ai trouvées dans ce fil. Il s'avère qu'ils étaient tous très rapides et ne posent probablement pas de problème de "lenteur" lors de la frappe. La méthode la plus lente que j'ai examinée était d'environ 125 ms pour 10 000 appels dans IE8. Soit 0,0125 ms par course.

J'ai trouvé que les méthodes publiées par Codenepal et Robin Maben étaient les plus rapides ~ 0,001 ms (IE8) mais méfiez-vous des différentes sémantiques.

C'est peut-être un soulagement pour quelqu'un qui introduit ce type de fonctionnalité à son code.

Réponse erikkallen modifiée:

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

Cette solution a très bien fonctionné lors des tests.

J'ai ajouté du code pour gérer certains champs de saisie non balisés avec entrée et pour les intégrer dans une application Oracle PL / SQL qui génère un formulaire d'entrée pour mon travail.

Mes deux centimes":

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

J'ai créé un projet NPM avec une version propre de l'actuel accepté (d'erikkallen)

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

Il utilise essentiellement les mêmes principes mais:

• Pas de dépendance
• Prise en charge de contenteditable
• Base de code plus lisible / maintenable
• Sera pris en charge car il sera utilisé en production par mon entreprise
• Licence 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);
};

Voici ma réécriture de la réponse la plus votée. J'ai essayé de vérifier element.value! == indéfini (car certains éléments comme peuvent ne pas avoir d'attribut html mais peuvent avoir une propriété de valeur javascript quelque part sur la chaîne du prototype), mais cela ne fonctionnait pas très bien et avait beaucoup de cas marginaux. Il ne semble pas y avoir de bon moyen de pérenniser cela, donc une liste blanche semble la meilleure option.

Cela enregistre l'élément à la fin de la phase de bulle d'événement, donc si vous souhaitez gérer le retour arrière d'une manière personnalisée, vous pouvez le faire dans d'autres gestionnaires.

Cela vérifie également l'instance de HTMLTextAreElement car on pourrait théoriquement avoir un composant Web qui en hérite.

Cela ne vérifie pas contentEditable (à combiner avec d'autres réponses).

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

Sitepoint: désactiver le retour pour Javascript

event.stopPropagation()et event.preventDefault()ne rien faire dans IE. J'ai dû envoyer le retour event.keyCode == 11(je viens de choisir quelque chose) au lieu de simplement dire "if not = 8, run the event"pour le faire fonctionner. event.returnValue = falsefonctionne également.

Une autre méthode utilisant 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>

J'utilise cela dans mon code depuis un certain temps maintenant. J'écris des tests en ligne pour les étudiants et suis tombé sur le problème lorsque les étudiants appuyaient sur le retour arrière pendant leur test et cela les ramènerait à l'écran de connexion. Frustrant! Cela fonctionne sur FF à coup sûr.

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