So blockieren Sie die Rücktaste mit JavaScript

Wir alle wissen, dass die Rücktaste die Rückkehr zum vorherigen Schritt bedeutet. Wenn Sie einen IE-Browser entwickeln und verwenden, werden Sie feststellen, dass Sie das Textfeld mit dem Attribut readonly="readonly" auf schreibgeschützt setzen. Eingang type="text" Bei readonly="readonly"/> tritt ein seltsames Problem auf: Wenn der Cursor in das schreibgeschützte Textfeld eintritt und dann die Rücktaste drückt, springt er zur vorherigen Seite. Der Effekt ist, als würde man auf die Zurück-Schaltfläche des Browsers klicken Zurück zur vorherigen Seite, aber unter Firefox und Google tritt kein solches Problem auf. Um dieses Problem zu lösen, habe ich die folgende Verarbeitungsmethode geschrieben: 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 im schreibgeschützten Eingabefeld“ lösen unter IE, um zur vorherigen Seite zurückzukehren. „Ein Problem mit einer Seite“ ist ein Formular mit einem schreibgeschützten Attribut auf unserer Webseite, wenn es wie folgt lautet:

Das obige Textfeld wird nur verwendet, um dem Benutzer einige Informationen anzuzeigen Der Benutzer kann es nicht ändern, daher wird das schreibgeschützte Attribut „readonly='readonly“ hinzugefügt. Unter IE8 ist der Unterschied zwischen diesem und anderen normalen Textfeldern jedoch nicht anhand des Erscheinungsbilds erkennbar, sodass einige Benutzer möglicherweise einige Vorgänge daran ausführen Zum Löschen oder Hinzufügen von Inhalten, z. B. wenn sich der Cursor im Textfeld dieses schreibgeschützten Attributs befindet und der Benutzer die Rücktaste (Rücktaste zum Löschen) drückt, wird der gesamte Browser zurückgesetzt, was zu Personen führt Zu diesem Zeitpunkt müssen wir dies nur blockieren. Lesen Sie einige der angegebenen Tasten im Textfeld, damit der Browser nicht zurückgeht, aktualisiert oder vorwärts geht, wenn er diese Tasten drückt.

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

Im obigen Code bedeutet onkeydown, wenn die Taste gedrückt wird. Hier ist der spezifische Code der JS-Funktion pingbi, der ebenfalls sehr einfach ist:

Okay, wenn sich der Cursor also im Textfeld des schreibgeschützten Attributs befindet, drückt der Benutzer die Rücktaste (Rücktaste zum Löschen), ohne dass der Browser zurückgeht.

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

Der obige Inhalt ist der Implementierungscode für JavaScript zum Blockieren der Rücktaste. Wenn Sie weitere Programmierfragen haben, schauen Sie sich bitte die

PHP-Chinese-Website

an.

Verwandte Empfehlungen:

So verwenden Sie JavaScript zum Ändern von Pseudoklassenstilen

Hinzufügen, Löschen, Ändern und Überprüfen von JavaScript

JavaScript-Array-Deduplizierungsmethode

Das obige ist der detaillierte Inhalt vonSo blockieren Sie die Rücktaste mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!