JavaScript implementation case of shielding the Backspace key

Today I discovered under IE browser that when using the readonly="readonly" attribute to set the text box to read-only<input type="text" there is a strange problem when readonly>: If the cursor enters the read-only text box and then presses the Backspace key, it will jump to the previous page, and the effect is like clicking the browser's back button. The button returns to the previous page, but no such problem occurs under Firefox and Google. In order to solve this problem, I wrote the following processing method. If the text box is read-only, then disable the Backspace key.

The code is as follows:

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

After adding this processing, you can solve the problem of "pressing the Backspace key in the read-only input box under IE to return to the previous page." "

ps: Use JS to shield the backspace (backspace delete) key or the perfect code for a specified key

When our web page When there is a form with a read-only attribute, it is as follows:

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

The above text field is only used to display some information to the user, and the user cannot change it, so "readonly='readonly' is added " has the read-only attribute, but under IE8, it cannot be distinguished from other normal text fields in appearance, so some users may perform some operations on it to delete or add content, such as when the cursor is located When the user presses the backspace (backspace delete key) within the text field of this read-only attribute, it will cause the entire browser to go back, which will make people very depressed. At this time, what we have to do is to block this read-only attribute. Some specified keys on the text field, so that when the user presses these keys, it will not cause the browser to back, refresh, or move forward.

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

In the above code, onkeydown means when the button is pressed. Here is the specific code of the JS function pingbi, which is also very simple:

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

Okay, so when When the cursor is located in a text field with a read-only attribute, pressing the backspace key will not cause the browser to go back.

The above is the detailed content of JavaScript implementation case of shielding the Backspace key. For more information, please follow other related articles on the PHP Chinese website!