Heim  >  Artikel  >  Web-Frontend  >  So deaktivieren Sie die Rücktaste in JavaScript

So deaktivieren Sie die Rücktaste in JavaScript

PHPz
PHPzOriginal
2016-05-16 15:27:571407Durchsuche

Heute habe ich im IE-Browser entdeckt, dass beim Festlegen des Textfelds auf schreibgeschützt mithilfe des Attributs readonly="readonly" ein seltsames Problem auftritt: Wenn der Cursor in das schreibgeschützte Textfeld gelangt und Drücken Sie dann die Rücktaste, um zur vorherigen Seite zu springen. Der Effekt ist wie das Klicken auf die Zurück-Taste des Browsers. Unter Firefox und Google gibt es jedoch kein solches Problem schrieb Folgendes: Die Verarbeitungsmethode: Wenn das Textfeld schreibgeschützt ist, deaktivieren Sie die Rücktaste.
Der Code lautet wie folgt:

//处理键盘事件 禁止后退键(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;
}

Nachdem Sie diese Verarbeitung hinzugefügt haben, können Sie das Problem des „Drückens der Rücktaste beim Lesen“ leicht lösen -nur Eingabefeld unter IE-Problem „Zurück zur vorherigen Seite“.

Ich hoffe, dass Ihnen dieser Artikel gefällt und dass Sie weiterhin auf die vom Herausgeber aktualisierten Artikel achten.

【Empfohlene verwandte Tutorials】

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn