Javascript: Comment bloquer le caractère de retour arrière?

Question

Je ne veux pas que l'utilisateur de mon site Web utilise retour arrière pour aller à la page précédente,
mais je veux toujours garder l'utilisation de retour arrière,
tout comme la suppression de la faute de frappe.
Comment puis-je faire?

Merci beaucoup.

Answer 1

Vous devriez pouvoir attacher un écouteur onKeydown/Up/Press à votre fenêtre. Dans cette fonction, regardez le code clé sur lequel vous avez appuyé et la cible de l'événement. Si le code clé est un retour arrière et que la cible n'est PAS une zone de saisie ou une zone de texte, empêchez l'événement.

Answer 2

Vous pouvez utiliser la propriété « onbeforeunload » sur l'étiquette du corps pour inviter l'utilisateur qu'il quitte la page.

Answer 3

Comme d'autres l'ont mentionné, il existe des méthodes dans lesquelles vous pouvez surveiller les événements clés de retour arrière et effectuer différentes actions.

Je recommande contre attraper la touche backspace pour deux raisons:

1) Il est tout simplement irritant et irrité les utilisateurs sont susceptibles de ne pas retourner à votre page.

2) Le retour arrière n'est pas la seule méthode de retour à la page précédente. Il y a d'autres combinaisons de touches qui peuvent accomplir la même chose, ainsi que le "bouton de retour" évident.

Ne pas le faire - mais si vous devez, utiliser onbeforeunload() plutôt que le piégeage des traits clés spécifiques du navigateur.

Answer 4

Vous pouvez simplement utiliser les extraits de code suivants pour bloquer le backspace lorsque le curseur se trouve dans texarea, le texte et les contrôles par mot de passe.

function onKeyDown() 
{  
    if((event.altKey) || ((event.keyCode == 8) && 
     (event.srcElement.type != "text" && 
     event.srcElement.type != "textarea" && 
     event.srcElement.type != "password")) || 
     ((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82))) || (event.keyCode == 116)) { 
    event.keyCode = 0; 
    event.returnValue = false;} 
} 

Appelez cette fonction de balise body onkeydown événement

Answer 5

Solution: Placez le code suivant vers la fin de toutes vos pages qui contiennent des formes:

<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas --> 
<script type="text/javascript"> 
    function blockBackspaceAndEnter(e) { 
     if (!e) { // IE reports window.event instead of the argument 
      e = window.event; 
     } 
     var keycode; 
     if (document.all) { 
      // IE 
      keycode = e.keyCode; 
     } else { 
      // Not IE 
      keycode = e.which; 
     } 
     // Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password 
     if ((keycode == 8 
       && e.srcElement.type != "text" 
       && e.srcElement.type != "textarea" 
       && e.srcElement.type != "password") 
       || (keycode == 13 && e.srcElement.type != "textarea")) { 
      e.keyCode = 0; 
      if (document.all) { 
       // IE 
       event.returnValue = false; 
      } else { 
       // Non IE 
       Event.stop(e); 
      } 
     } 
    } 
    for (var i = 0; i < document.forms.length; i++) { 
     document.forms[i].onkeydown = blockBackspaceAndEnter; 
    } 
</script> 

j'ai les commentaires suivants ce que les autres ont répondu ici avant:

Quelqu'un a dit:

"S'il vous plaît ne pas. Les utilisateurs aiment backspace-to-go-back; . Retourne est l'une des caractéristiques du navigateur le plus vital et la rupture est insupportablement grossier »

Ma réponse lui est:

Oui, en général les gens utilisent-ils le dos-bouton pour revenir en arrière , MAIS PAS sur les pages avec des formulaires. D'autre part, il est vraiment facile pour les gens à cliquer accidentellement près ou à l'extérieur d'un texte d'entrée ou textarea, puis appuyez sur le bouton de retour, ils perdront toutes leurs modifications, comme quelqu'un d'autre a également remarqué:

« les utilisateurs ne sont pas dans une zone de texte et cliquez sur le backspace , perdant complètement toutes les informations sous forme qu'ils viennent entrées. ne serait normalement pas un problème, mais pour nous, nous remplir beaucoup de texte sur les formes d'état longues. "

Le même un comportement indésirable peut également dire au sujet de la touche Entrée pour soumettre le formulaire, qui est généralement souhaitable (si jamais) pour les petites formes avec quelques champs, mais pas pour les formes avec beaucoup champs et sélectionnez des zones et des zones de saisie et des zones de texte, dans lequel la plupart du temps, vous ne voulez pas que le formulaire est soumis lorsque vous appuyez sur Entrée. C'est pourquoi je suggère le code ci-dessus, qui s'applique à tous les tags <FORM> la fonction proposée par webster, mais sans les vérifications pour ALT, ce qui ne me semble pas utile, et sans les vérifications de CTRL + N et CTRL + R et CTRL + F5, que nous ne voulons pas bloquer, car quand ils sont utilisés, ils ne sont pas accidentels.

Malheureusement, le code au-dessus de ne fonctionne pas dans Firefox lorsque vous avez DIVs et TABLEs dans votre FORM! Cela est dû au fait que l'événement keydown ne semble pas être propagé au formulaire conteneur et que le comportement par défaut (UNDESIRED!) Est appliqué aux touches Backspace et Enter. Je ne pouvais pas encore trouver une solution pour celui-ci ...

Answer 6

Filme Noi Cinema a la bonne réponse, mais l'exemple de code est un peu daté. J'avais juste besoin de cette solution, alors j'ai pensé que je posterais le code que j'ai utilisé.

//I use the standard DOM method for accessing the body tag, because the 
//non-standard HTML DOM shortcuts are not stable. The correct behavior is 
//dynamically attached to the entire body using the onkeypress event, which 
//is the most stable event to target cross browser. 
document.getElementsByTagName("body")[0].onkeypress = function (event) { 
    var a = event || window.event, //get event cross browser 
     b = a.target || a.srcElement; //get source cross browser 

    //the only thing that matters is the backspace key 
    if (a.keyCode === 8) { 

     //if you are a textarea or input type text or password then fail 
     if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) { 
      return true; 
     } else { 

      //backspace is disabled for everything else 
      return false; 
     } 
    } 
}; 

Ce code doit être exécuté avant que l'utilisateur commence à utiliser la page. Il existe plusieurs façons de le faire:

1. Vous pouvez placer le code ci-dessus dans n'importe quelle fonction déjà attachée à l'événement onload.
2. Vous pouvez envelopper le code ci-dessus lié à l'événement onload de la page.
3. Vous pouvez placer le code ci-dessus dans une fonction auto-exécutable.

Exemples:

//self executing function 
(function() { 
    the solution code here 
}()); 

//wrapper to onload event 
document.getElementsByTagName("body")[0].onload = function() { 
    the solution code here 
}; 

J'ajoute ce code Pretty Diff si vous voulez voir un exemple en action.

Answer 7

J'ai finalement trouvé un qui fonctionne sur tous les navigateurs.

Il est par Hazem Saleh Son adresse est la suivante: http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/

/*Starts here:*/ 

    document.onkeydown = function (event) { 

    if (!event) { /* This will happen in IE */ 
     event = window.event; 
    } 

    var keyCode = event.keyCode; 

    if (keyCode == 8 && 
     ((event.target || event.srcElement).tagName != "TEXTAREA") && 
     ((event.target || event.srcElement).tagName != "INPUT")) { 

     if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) { 
      event.stopPropagation(); 
     } else { 
      alert("prevented"); 
      event.returnValue = false; 
     } 

     return false; 
    } 
    }; 
/*Ends Here*/