Un cas d'utilisation de JavaScript pour bloquer la touche Retour arrière

J'ai découvert aujourd'hui sous navigateur IE qu'il y a un problème étrange lors de l'utilisation de l'attribut readonly="readonly" pour définir la zone de texte en lecture seule  : si le curseur saisit le texte en lecture seule Dans la boîte de dialogue, 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. J'ai écrit une méthode de traitement suivante, 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 de "appuyer sur la touche Retour arrière dans la zone de saisie en lecture seule sous IE pour revenir à la page précédente. Problème"

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

Lorsque notre page Web contient un formulaire avec un attribut en lecture seule, cela se présente comme suit :

<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 le modifier, donc "lecture seule" est ajouté = 'lecture seule'", mais sous IE8, la différence entre celui-ci et les autres champs de texte normaux ne peut pas être vue depuis l'apparence, donc certains utilisateurs peuvent effectuer certaines opérations dessus pour le supprimer ou ajouter du contenu. Par exemple, lorsque le curseur 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), l'ensemble du navigateur reviendra en arrière, ce qui rendra les gens très enfoncé. À ce stade, ce que nous devons faire est de protéger certaines touches spécifiées sur ce champ de texte en lecture seule 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 se trouve dans le champ de texte avec un attribut en lecture seule, l'utilisateur appuie sur la touche retour arrière (touche de suppression du retour arrière) sans faire revenir le navigateur en arrière.

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!