Comment désactiver le retour arrière si autre chose que le champ de saisie est centré sur l’utilisation de jquery

Je pense que cela ferait l’affaire

 $(document).keydown(function(e) { var elid = $(document.activeElement).hasClass('textInput'); if (e.keyCode === 8 && !elid) { return false; }; }); 

en supposant que les zones de texte ont la classe ‘textInput’.

Voici un exemple de travail

Cela désactivera le retour arrière sur votre site sans avoir à append des classes spécifiques aux zones de saisie. Pour désactiver le retour arrière, sauf lorsque vous utilisez des zones de saisie, utilisez .is (“input: focus”) si vous souhaitez désactiver le retour arrière, sauf lorsque vous utilisez une zone de texte, utilisez .is (“input: focus, textarea: focus”).

 $(document).keypress(function(e){ var elid = $(document.activeElement).is("input:focus"); if(e.keyCode === 8 && !elid){ return false; }; }); 

La solution Hudson-Peralta + QF_Developer est excellente, mais elle présente un défaut:
Si vous vous concentrez sur un bouton radio ou une case à cocher, le bouton de retour arrière vous rejettera quand même en arrière de la page. Voici une modification pour éviter cet écart:

 $(document).keydown(function(e){ var elid = $(document.activeElement).is('input[type="text"]:focus, textarea:focus'); if(e.keyCode === 8 && !elid){ return false; }; }); 

EDIT 20130204:
keypress() remplacée par keydown() !
Le code ci-dessus fonctionne maintenant correctement.

EDIT 20151208:
Comme mentionné dans le commentaire de @outofmind, il y a plus de types d’entrées qui pourraient vous rejeter lorsque vous appuyez sur la touche Retour arrière. Veuillez append à la liste de sélecteurs séparés par des virgules de la méthode is () tout type de champs de saisie permettant la saisie directe de caractères et réellement utilisés dans votre code HTML, comme input[type="password"]:focus , input[type="number"]:focus ou input[type="email"]:focus .

Je pense qu’une légère modification est nécessaire pour gérer textareas:

 var elid = $(document.activeElement).is("input:focus, textarea:focus"); 

J’ai légèrement modifié la réponse acceptée, ce qui peut être utile à quelqu’un:

 $(document).keydown(function(e) { var elid = $(document.activeElement).is("input, textarea") ; if (e.keyCode === 8 && !elid) { if(e.ctrlKey) { window.history.back() } else { alert("Navigating with Backspace has been disabled. Use CTRL + Backspace if you want to go back to the previous page (and lose any unsaved changes)."); return false; } } }); 

Avec cette méthode, l’utilisateur peut toujours naviguer en utilisant Backspace en maintenant CTRL, mais il prend aussi en compte la zone de textarea ainsi que toute input .

Bien sûr, l’alternative consiste à utiliser quelque chose comme ceci à la place, ce qui ne permet pas à l’utilisateur de quitter la page s’il a saisi quoi que ce soit.

@ Nick Craver, réponse honteuse pour plusieurs raisons. Répondez à la question ou au moins avec condescendance.

Voici une solution basée sur un prototype que j’ai finalement utilisée pour mes formulaires, car les utilisateurs se sont plaints du fait que la touche de retour arrière les enlèverait (ce qui est tout à fait paradoxal, on peut se demander pourquoi tous les navigateurs utilisent la touche de retour arrière comme bouton de retour).

 // event handlers must be attached after the DOM is completely loaded Event.observe(window, 'load', function() { // keypress won't fire for backspace so we observe 'keydown' Event.observe(window, 'keydown', function(event){ // 8 == backspace if( event.keyCode == 8) { // with no field focused, the target will be HTMLBodyElement if( event.target == document.body) { // stop this event from propagating further which prevents // the browser from doing the 'back' action event.stop(); } } }); }); 

La réponse de Hudson-Peralta a bien fonctionné pour moi, mais j’ai apporté une petite modification car j’utilise de nombreux événements de raccourci:

 $(document).keydown(function(e){ var elid = $(document.activeElement).is("input:focus"); if(e.keyCode === 8 && !elid){ e.preventDefault(); }; }); 

Moi aussi j’ai travaillé dur sur la même chose. Enfin, j’ai trouvé la réponse et pour le confort de tous, j’ai placé la solution sur http://blog.totusinfo.com/jquery-disable-backspace-for-document-history-except-inputs-and-textarea/

J’ai modifié la réponse un peu plus pour combiner la bonne réponse de tout le monde
1. sélecteur utilisé “input [type = text]: focus, textarea: focus” pour conserver le comportement par défaut de ces éléments et, comme JPsy l’a dit, pour empêcher le comportement par défaut des entrées telles que les cases à cocher
2. utilise e.target à la place pour faire en sorte que le code dépende plus exclusivement de JQuery, car je ne suis pas sûr que tous les navigateurs prennent en charge document.activeElement.

MODIFIER
3. Incluez également le champ mot de passe en ajoutant “input [type = password]: focus” ,

      $ (document) .keydown (fonction (e) {

           code var = e.keyCode;
           var is_to_stop = (! $ (e.target) .is ("input [type = texte]: focus, entrée [type = mot de passe]: focus, textarea: focus")) && (code == 8);
           if (is_to_stop) {
             retourne faux;
           }

     });