Comment puis-je empêcher la touche de navigation retour ?

Question

Sur IE, je peux le faire avec l' (terriblement non-standard, mais le travail) de jQuery

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

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

Pour l'enregistrement:

$(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 touche retour arrière inutilisable sur la page, ce qui est encore pire que l'original comportement.

EDIT: La raison pour laquelle je fais c'est que je ne suis pas la création d'une page web simple mais d'une grande application. Il est incroyablement ennuyeux de perdre 10 minutes de travail juste parce que vous avez appuyé sur la touche retour arrière dans le mauvais endroit. Le ratio de la prévention des erreurs vs ennuyeux, les utilisateurs doivent être au-dessus de 1000/1 par la prévention de la touche retour arrière de naviguer de nouveau.

EDIT2: je suis pas d'essayer d'empêcher l'histoire de la navigation, seulement les accidents.

EDIT3: @brentonstrines commentaire (déplacé ici car la question est tellement populaire): C'est un long-terme de "réparer", mais vous pouvez jeter votre soutien derrière le Chrome bug pour modifier ce comportement dans webkit

Answer 1

Ce code a résolu le problème, au moins dans IE et Firefox (n’ont pas testé les autres, mais je lui donner une chance raisonnable de fonctionner si le problème existe même dans les autres navigateurs).

Answer 2

Ce code fonctionne sur tous les navigateurs et avale la touche backspace quand pas sur un élément de formulaire, ou si l’élément de formulaire est désactivé | readOnly. Il est aussi efficace, qui est important lorsqu’il s’exécute sur toutes les clés tapées dans.

Answer 3

Les autres réponses ici ont établi que cela ne peut se faire sans une liste blanche des éléments qui la touche retour arrière est autorisé. Cette solution n'est pas idéale, car la liste blanche n'est pas aussi simple que simplement ces zones de texte et texte/mot de passe intrants, mais à plusieurs reprises jugé incomplet et qui ont besoin d'être mis à jour. Toutefois, étant donné que le but de la suppression de la fonctionnalité retour arrière est simplement pour empêcher les utilisateurs de perdre accidentellement des données, la beforeunload solution est bonne parce que le modal popup est surprenant--modal popups sont mauvais quand ils sont déclenchées dans le cadre d'un flux de travail standard, car l'utilisateur s'habitue à les rejeter sans les lire, et qu'ils sont ennuyeux. Dans ce cas, le modal popup doit apparaître uniquement comme une alternative à une rare et surprenant d'action, et est donc acceptable. Le problème est que onbeforeunload modal ne doit pas pop up à chaque fois que l'utilisateur quitte la page (comme lors de la soumission d'un formulaire ou en cliquant sur un lien), et nous ne voulons pas commencer à la liste blanche ou liste noire spécifiques onbeforeunload conditions. La combinaison idéale de compromis pour une solution généralisée est comme suit: garder une trace de savoir si la dernière entrée de l'utilisateur, si la pression de touche ou clic de souris, est retour arrière--et seulement pop up onbeforeunload modale si elle est. En d'autres termes:

function confirmBackspaceNavigations(){
    var lastUserInputWasBackspace = false
    $(document).keydown(function(event){
        lastUserInputWasBackspace = event.which == 8 ? true : false
    })
    $(document).mousedown(function(){
        lastUserInputWasBackspace = false
    })
    $(window).on('beforeunload', function(){
        if (lastUserInputWasBackspace) {
            return "Are you sure you want to leave this page?"
        }
    })
}

Cela a été testé pour fonctionner dans IE7+, FireFox, Chrome, Safari et Opera. Il suffit de déposer cette fonction dans votre global.js et de l'appeler à partir de n'importe quelle page où vous ne voulez pas que les utilisateurs de perdre accidentellement leurs données. Il n'est pas important pour gérer les conditions de bords comme l'utilisateur en appuyant sur la touche retour arrière dans un champ de texte, puis de naviguer à l'extérieur en cliquant sur le bouton actualiser du navigateur (il sera pratiquement jamais arriver, et quand il le fait, c'est juste un supplément de demande de confirmation, pas grand-chose).

Answer 4

Une solution plus élégante/concise :

Answer 5

Modification de erikkallen, en Réponse à l'adresse des différents types d'entrée

J'ai trouvé que l'esprit d'entreprise l'utilisateur peut appuyer sur la touche retour arrière sur une case à cocher ou un bouton radio dans une vaine tentative de le vider et à la place ils allaient revenir en arrière et de perdre toutes leurs données.

Ce changement devrait s'occuper de cette question.

Nouvelle Édition à l'adresse de contenu modifiable divs

    //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 le test, assurez-2 fichiers.

starthere.htm - ouvrir cette première de sorte que vous avez un endroit où aller retour à

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

test.htm - Cela permettra de naviguer vers l'arrière lorsque la touche retour arrière est enfoncé alors que la case à cocher ou soumettre a le focus (réalisé par tabulation). Remplacer avec mon code afin de le 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>