Code d'implémentation pour JavaScript pour protéger la touche Retour arrière

Cet article présente principalement le code d'implémentation de JavaScript pour bloquer la touche Retour arrière. Il est très bon et a la valeur de référence et d'apprentissage de JavaScript. Les amis intéressés par JavaScript peuvent se référer à cet article <.>

Aujourd'hui, j'ai découvert sous le

navigateur IE qu'il y avait un problème étrange lors de l'utilisation de l'attribut pour définir la zone de texte en lecture seulereadonly="readonly" : si le curseur entre en lecture seule uniquement la zone de texte, puis appuyez sur la touche Retour arrière pour passer à la page précédente. L'effet est similaire à celui d'un clic sur le bouton Précédent du navigateur pour revenir à la page précédente. Cependant, ce problème n'existe pas sous Firefox et Google. ce problème, j'ai écrit ce qui suit La méthode de traitement, si la zone de texte est en lecture seule, désactivez la touche Retour arrière.

Le code est le suivant :

 //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
   function banBackSpace(e){  
     var ev = e || window.event;//获取event对象  
     var obj = ev.target || ev.srcElement;//获取事件源  
     var t = obj.type || obj.getAttribute('type');//获取事件源类型 
     //获取作为判断条件的事件类型
     var vReadOnly = obj.getAttribute('readonly');
     //处理null值情况
     vReadOnly = (vReadOnly == "") ? false : vReadOnly;
     //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
     //并且readonly属性为true或enabled属性为false的，则退格键失效
     var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
           && vReadOnly=="readonly")?true:false;
     //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
     var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
           ?true:false;    
     
     //判断
     if(flag2){
       return false;
     }
     if(flag1){  
       return false;  
     }  
   }
 window.onload=function(){
   //禁止后退键 作用于Firefox、Opera
   document.onkeypress=banBackSpace;
   //禁止后退键 作用于IE、Chrome
   document.onkeydown=banBackSpace;
 }

Après avoir ajouté ce traitement, vous pouvez résoudre le problème "d'appuyer sur la touche Retour arrière dans la zone de saisie en lecture seule sous IE pour revenir au page précédente."

ps : utilisez JS pour protéger la touche de retour arrière (suppression du retour arrière) ou le code parfait pour une touche spécifiée

Quand il existe un formulaire avec un attribut en lecture seule qui est le suivant :

<input type="text" readonly="readonly" name="HuoShangName" id="HuoShangName" />

Le champ de texte ci-dessus est uniquement utilisé pour afficher certaines informations à l'utilisateur, et l'utilisateur ne peut pas les modifier, donc "readonly= "readonly" est ajouté "" attribut en lecture seule, mais sous IE8, la différence entre celui-ci et les autres champs de texte normaux ne peut pas être vue à partir de l'apparence, donc certains utilisateurs peuvent effectuer certaines opérations dessus pour supprimer ou ajouter du contenu, par exemple lorsque le curseur Lorsqu'il est situé dans le champ de texte de cet attribut en lecture seule, si l'utilisateur appuie sur la touche retour arrière (touche de suppression de retour arrière), tout le navigateur reviendra en arrière, ce qui rendra les gens très déprimés à ce moment-là. Ce que vous devez faire est de bloquer cette lecture uniquement de certaines touches spécifiées dans le champ de texte afin que lorsque l'utilisateur appuie sur ces touches, le navigateur ne recule pas, ne s'actualise pas ou n'avance pas.

<input class="input w350" type="text" readonly="readonly" onkeydown="PingBi(&#39;8&#39;)" name="HuoShangName" id="HuoShangName" />

Dans le code ci-dessus, onkeydown signifie quand le bouton est enfoncé. Voici le code spécifique de la fonction JS pingbi, qui est également très simple :

function PingBi(id){
 var k=window.event.keyCode;
 if(k==id){window.event.keyCode=0;window.event.returnValue=false;return false;}
}

Okay In. de cette façon, lorsque le curseur est situé dans le champ de texte avec un attribut en lecture seule, lorsque l'utilisateur appuie sur la touche retour arrière (touche de suppression du retour arrière), le navigateur ne reviendra pas en arrière.

Ce qui précède est le code d'implémentation de JavaScript bloquant la touche Retour arrière introduit par l'éditeur. J'espère qu'il sera utile à tout le monde ! !

Recommandations associées :

Partage d'exemples d'implémentation JavaScript du système de loterie

Explication détaillée des connaissances de base de JavaScript

Explication détaillée de l'ordre de chargement et du principe d'exécution du javascript haute performance

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!