Empêchez BACKSPACE de revenir en arrière avec jQuery (Like Google's Homepage)

Je lierais un gestionnaire d'événements à la keydown et j'empêcherais l'action par défaut de cet événement si nous traitons la touche de rétro-espace à l'extérieur d'une zone de textarea ou d'une input :

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

J'aime vraiment la réponse d'Andrew Whitaker. Cependant, il naviguera encore lorsqu'il se concentrera sur un champ de saisie de lecture, de radio ou de case à cocher et ne permettra pas de reculer sur les éléments contentEditable, de sorte que j'ai ajouté une légère modification. Le crédit est versé à Andrew Whitaker.

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

Actuellement, il semble nécessaire d'avoir chaque variation [contentEditable] qui se trouve dans le HTML depuis [contentEditable]! = [ContentEditable = true].

La façon dont Google est fait est un peu cool. Lorsque vous appuyez sur l'arrière-espace, ils concentrent le champ de texte. Prévenir les utilisateurs de revenir en arrière!

Vous pouvez essayer la même chose:

 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <input id="target" type="text" /> <script type="text/javascript"> $(document).keydown(function(e) { if (e.keyCode == 8) $('#target').focus(); }); </script> 

Démo: http://jsfiddle.net/epinapala/TxG5p/

Pour éviter de naviguer, tout simplement ce code fonctionne!

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

Mais cela arrivera même pour les champs de saisie de type text / textarea. Donc, pour le restreindre pour ces champs, vous pouvez utiliser

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

Dans mon cas où j'avais un champ de texte pour le calendrier et chaque fois que j'avais cliqué sur ce calendrier, sélectionnez la date et appuyez sur le recul pour revenir à la page précédente. Pour l'empêcher pour ce champ, j'ai simplement utilisé

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

Je pensais que certains pour aider 😉

Voici une solution simple testée sur IE, Chrome et Firefox.

 $(document).on("keydown", function (event) { // Chrome & Firefox || Internet Explorer if (document.activeElement === document.body || document.activeElement === document.body.parentElement) { // SPACE (32) o BACKSPACE (8) if (event.keyCode === 32 || event.keyCode === 8) { event.preventDefault(); } }}); 

C'est vieux, mais ces réponses vous permettront de reculer et de naviguer lorsque vous vous concentrez sur un bouton radio. Vous voudrez également filtrer le type d'entrée. Créditez toutes les réponses ci-dessus pour ceci:

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

J'ai essayé plusieurs des extraits de code sur Internet sans résultat satisfaisant. Les nouvelles versions du navigateur IE (IE11) et Crome ont rompu ma solution précédente, mais voici ce qui fonctionne pour moi avec IE11 + Crome + Firefox. Le code empêche le rétro-espace et l'utilisateur ne perd rien de ce qu'il a entré dans un champ de texte:

 window.addEventListener('keydown', function (e) { if (e.keyIdentifier === 'U+0008' || e.keyIdentifier === 'Backspace' || e.keyCode === '8' || document.activeElement !== 'text') { if (e.target === document.body) { e.preventDefault(); } } }, true); 

Pour Internet Explorer, cela a fonctionné pour moi:

Window.addEventListener ('keydown', function (e) {

  if (e.keyCode === 8) { if (e.target === document.body) { e.preventDefault(); } } }, true); 

Manipulé des zones de texte en lecture seule

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