Comment bloquer la touche Retour arrière avec JavaScript

Nous savons tous que la touche Retour arrière signifie revenir à l'étape précédente. Lorsque vous développez et utilisez le navigateur IE, vous constaterez que lorsque vous utilisez l'attribut readonly="readonly" pour définir la zone de texte en lecture seule< saisir type="texte" Il y a un problème étrange lorsque readonly="readonly"/> : si le curseur entre dans la zone de texte en lecture seule et appuie ensuite sur la touche Retour arrière, il passera à la page précédente. L'effet est comme cliquer sur le bouton de retour du navigateur pour. revenir à la page précédente. Une page est la même, mais aucun problème de ce type ne se produit sous Firefox et Google. Afin de résoudre ce problème, j'ai écrit la 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" Un problème avec une page "

ps : Utilisez JS pour protéger la touche backspace (backspace delete) ou le code parfait pour une touche spécifiée

Quand il y a est un formulaire avec un attribut en lecture seule dans notre page Web lorsque, 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 le l'utilisateur ne peut pas le 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 depuis 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), l'ensemble du navigateur reviendra en arrière, ce qui incitera les gens très déprimé. À l'heure actuelle, ce que nous devons 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.

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;}
}

<.>

D'accord, donc lorsque le curseur est dans le champ de texte de l'attribut en lecture seule, l'utilisateur appuie sur la touche retour arrière (touche de suppression de retour arrière) sans faire revenir le navigateur en arrière.

Le contenu ci-dessus est le code d'implémentation de JavaScript bloquant la touche Retour arrière. J'espère que cela pourra aider tout le monde. Si vous avez d'autres questions de programmation, veuillez faire attention au

Site Web PHP chinois.

Recommandations associées :

Comment utiliser JavaScript pour modifier les styles de pseudo-classes

Ajout, suppression, modification et vérification de JavaScript

Méthode de déduplication de tableau JavaScript

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!