JavaScript implementation code for shielding the Backspace key

This article mainly introduces the implementation code of JavaScript. It is very good and has the value of reference and learning JavaScript. Friends who are interested in JavaScript can refer to this article

Today I discovered under IE browser that when using the readonly="readonly" attribute to set the text box to read-only<input type="text" readonly 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 Returning to the previous page is the same, 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 "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 there is a page that only When reading the attribute form, 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. The user cannot change it, so the "readonly='readonly'" is added. Read attribute, but under IE8, the difference between it and other normal text fields cannot be seen from the appearance, so some users may perform some operations on it to delete or add content, such as when the cursor is located in this read-only text field. In the text field of the attribute, if the user presses the backspace (backspace delete key), 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 the read-only text field. Some designated keys, 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 implementation code of JavaScript shielding the Backspace key introduced by the editor. I hope it will be helpful to everyone! !

Related recommendations:

JavaScript implementation of lottery system example sharing

Detailed explanation of JavaScript basics

Detailed explanation of the loading order and execution principle of high-performance javascript

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