How to block the Backspace key with JavaScript

We all know that the backspace key means returning to the previous step. When you are developing and using IE browser, you will find that when you use the readonly="readonly" attribute to set the text box to read-only: If the cursor enters the read-only text box and then presses the Backspace key, it will jump to the previous page. The effect is like clicking the browser's back button to return to the previous page. The same 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. The problem is "

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

When there is a form with a read-only attribute in our web page, 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. When the user presses the backspace (backspace delete key) in the text field of the 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 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.

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 the cursor is located in the text field of the read-only attribute, the user presses the backspace (backspace delete key) without causing the browser to go back.

The above content is the implementation code of JavaScript blocking the Backspace key. I hope it can help everyone. If you have more programming questions, please pay attention to PHP Chinese website.

Related recommendations:

How to use JavaScript to modify the pseudo-class style

##javaScript add, delete, modify and check

JavaScript array deduplication method

The above is the detailed content of How to block the Backspace key with JavaScript. For more information, please follow other related articles on the PHP Chinese website!