Comment puis-je empêcher la touche backspace de revenir?

ce code fonctionne sur tous les navigateurs et avale la touche backspace 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 est exécuté sur toutes les touches saisies.

$(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 ceci ne peut pas être fait sans des éléments de liste blanche dans lesquels le Backspace est autorisé. Cette solution n'est pas idéale car la liste blanche n'est pas aussi simple que les textareas et les entrées de texte/mot de passe, mais elle est souvent jugée incomplète et doit être mise à jour.

cependant, comme le but de supprimer la fonctionnalité backspace est simplement d'empêcher les utilisateurs de perdre accidentellement des données, le la solution avant chargement est bonne parce que le popup modal est surprenant--les popups modaux sont mauvais quand ils sont déclenchés 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, le popup modal n'apparaît 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 navigue loin de la page (comme en cliquant sur un lien ou en soumettant un formulaire), et nous ne voulons pas commencer à whitelisting ou blacklisting conditions spécifiques onbeforeunload.

la combinaison idéale de compromis pour une solution généralisée est la suivante: Gardez une trace de si l'espace arrière est pressé, et pop up seulement le modal onbeforeunload si elle est. 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. Il suffit de déposer de cette fonction dans votre global.js et l'appeler à partir de n'importe quelle page où vous ne voulez pas que les utilisateurs perdent 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 erikkallen, en Réponse à l'adresse des différents types d'entrée

j'ai trouvé qu'un utilisateur entreprenant pourrait appuyer sur backspace sur une case à cocher ou un bouton radio dans une vaine tentative de le vider et à la place ils navigueraient à reculons et perdraient toutes leurs données.

ce changement devrait régler 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 tester faire 2 fichiers.

ici.htm-ouvrez cette première pour que vous ayez un endroit pour retourner à

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

test.htm-cela va naviguer à l'envers lorsque l'espace est pressé alors que la case à cocher ou soumettre a le focus (obtenu par tabbing). Remplacer par mon code à 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 voulez empêcher les gens de perdre des informations dans les formulaires, s'ils pressent backspace pour supprimer, mais le champ n'est pas focalisé.

, Dans ce cas, vous voulez regarder la 151930920" onunload gestionnaire d'événement. Stack Overflow l'utilise - Si vous essayez de laisser une page quand vous avez commencé à écrire une réponse, il apparaît un avertissement.

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 il suffit d'utiliser

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

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

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

Je ne sais pas pourquoi personne ne vient de répondre à cette question-semble comme une question technique parfaitement raisonnable de se demander si c'est possible.

Non, Je ne pense pas qu'il y ait un moyen de désactiver le bouton backspace. Je sais qu'il n'est pas activé par défaut en FF ces jours-ci.

en Combinant les solutions donné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();
    });
}); 

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 depuis keyIdentifier est déprécié, je voulais que ce code soit plus sûr donc j'ai ajouté ||E. keyCode= = 8 à la déclaration if. Aussi, le code ne fonctionnait pas bien sur Firefox donc j'ai ajouté return false; et maintenant il fonctionne parfaitement bien. Le voici:

<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 parce que,

1. C'est dans le plus pur javascript (pas de bibliothèque nécessaires).
2. non seulement il vérifie la touche pressée, il confirme si l'action est vraiment un navigateur" back " action.
3. avec ce qui précède, l'utilisateur peut taper et supprimer du texte à partir 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. C'est court, rapide, propre et droit au but.

vous pouvez ajouter console.log (e); pour vos besoins de test, et cliquez sur F12 dans chrome, allez dans l'onglet "console" et cliquez 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 le code ci-dessus pour répondre à vos besoins.

cette solution est similaire à d'autres qui ont été affichés, mais elle utilise une simple liste blanche la rendant facilement personnalisable pour permettre l'espace arrière dans les éléments spécifiés simplement en réglant le sélecteur dans le .is () function.

Je l'utilise dans ce formulaire pour empêcher l'espace arrière sur les pages de naviguer en arrière:

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

pour développer légèrement sur le excellente réponse de @erikkallen, voici une fonction qui permet tous les types d'entrées basées sur le clavier, y compris ceux introduits dans 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-jQuery way:

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

Javascript - le moyen natif, 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 du mal à trouver une réponse non-JQUERY. Merci à Stas de m'avoir mis sur la piste.

Chrome: si vous n'avez pas besoin d'un navigateur croisé, vous pouvez simplement utiliser une liste noire, plutôt que la liste blanche. Cette version JS pure fonctionne en Chrome, mais pas en IE. Pas sûr pour FF.

Dans Chrome (ver. 36, mid 2014), les touches non sur un élément input ou contenteditable semblent être ciblées à <BODY> . Cela rend il est possible d'utiliser une liste noire, que je préfère à la liste blanche. IE utilise la cible du dernier clic - donc il pourrait être une div ou n'importe quoi d'autre. Ça rend ça 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();
        }
    }
}  

de la Croix-Navigateur: Pour javascript, j'ai trouvé Stas réponse pour être le meilleur. Ajouter un contrôle 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 IEs [edit: et Spartan/TechPreview] ont une "fonctionnalité" qui rend tableau des éléments non modifiables . Si vous cliquez sur l'un d'eux et appuyez ensuite sur backspace, il va naviguer en arrière. Si vous n'avez pas modifiable <td> s, ce n'est pas un problème.

j'ai eu quelques problèmes avec la solution acceptée et la Sélection2.js plugin; je n'ai pas pu supprimer les caractères dans la boîte editable car l'action delete é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 une portée avec un attribut de "contentEditable" qui est défini à true pour la boîte combo modifiable en elle. J'ai ajouté du code pour tenir compte du tagname des travées et de l'attribut différent. Cela a résolu tous mes problèmes.

Modifier: si vous n'utilisez pas le plugin combobox Select2 pour jquery, alors cette solution peut ne pas être nécessaire pour 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 backspace

$(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 de simplement ajouter l'attribut suivant à votre champ de texte en lecture seule:

onkeydown= "return false; "

cela empêchera le navigateur de revenir en arrière dans l'histoire lorsque la touche Backspace est pressé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.

beaucoup plus propre solution

$(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 Pure, 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(éléments))". Le premier a bien fonctionné pour moi.

Performance?

j'étais inquiet pour la performance 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 j'ai trouvé dans ce thread. Il s'avère qu'ils étaient tous très rapides et ne causent probablement pas de problème en termes de "lenteur" lors de la dactylographie. La méthode la plus lente que j'ai regardé était d'environ 125 ms pour 10.000 Les appels dans IE8. Qui est de 0,0125 ms par course.

j'ai trouvé les méthodes publiées par Codenepal et Robin Maben pour être plus rapide ~ 0.001 ms (IE8) mais méfiez-vous de la sémantique différente.

c'est peut-être un soulagement pour quelqu'un d'introduire ce genre de fonctionnalité à son code.

Modifié erikkallen réponse:

$(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 de l'essai.

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

Mon "grain de sel":

 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'actuellement acceptée (de erikkallen)

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

Il utilise essentiellement les mêmes principes, mais:

• pas de dépendance
• Soutien pour contenteditable
• base de code plus lisible / maintenable
• sera supporté comme il sera utilisé dans la production par ma société
• licence MIT

var Backspace = 8;

// See /q/how-to-detach-event-in-ie-6-7-8-9-using-javascript-54246/"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 /q/how-can-i-prevent-the-backspace-key-from-navigating-back-42406/"keydown",disabler);
};

/**
 * Reenable the browser backs
 */
exports.enable = function(el) {
    removeHandler(el || document,"keydown",disabler);
};

Voici ma réécriture de haut-voté réponse. J'ai essayé de vérifier l'élément.la valeur!= = Non défini (puisque certains éléments comme peut n'avoir aucun attribut html mais peut avoir une propriété de valeur javascript quelque part sur la chaîne prototype), cependant cela ne fonctionnait pas très bien et avait beaucoup de cas de bord. Il ne semble pas y avoir une bonne façon de l'avenir-preuve de cela, donc une liste blanche semble la meilleure option.

cela enregistre l'élément à la fin de la phase bulle d'événement, donc si vous voulez pour gérer Backspace de n'importe quelle manière, vous pouvez le faire dans d'autres handlers.

ceci vérifie aussi l'instanceof HTMLTextAreElement puisqu'on pourrait théoriquement avoir un composant web qui hérite de cela.

ceci ne coche 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 dos pour Javascript

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

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 ce code depuis un certain temps maintenant. J'écris des tests en ligne pour les étudiants et j'ai rencontré le problème lorsque les étudiants pressaient backspace pendant leur test et cela les ramenait à l'écran de connexion. Frustrant! Ça marche sur FF, c'est sûr.

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