Implement js to disable the Backspace key to make the browser go back-JS Tutorial-php.cn

Implement js to disable the Backspace key to make the browser go back

巴扎黑

Release： 2017-09-02 14:04:40

Original

2294 people have browsed it

The following editor will bring you a js method to disable the Backspace key to make the browser go back. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

I encountered the problem of pressing the Backspace key to make the browser go back during the project. I searched for several solutions on the Internet, but none of them were ideal. So we gathered the wisdom of everyone and learned from the strengths of everyone, and summarized it as follows:

1. Define the method to prevent Backspace in public js

function banBackSpace(e){
 var ev = e || window.event;
 //各种浏览器下获取事件对象
 var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget;
 //按下Backspace键
 if(ev.keyCode == 8){
 var tagName = obj.nodeName //标签名称
 //如果标签不是input或者textarea则阻止Backspace
 if(tagName!=&#39;INPUT&#39; && tagName!=&#39;TEXTAREA&#39;){
  return stopIt(ev);
 }
 var tagType = obj.type.toUpperCase();//标签类型
 //input标签除了下面几种类型，全部阻止Backspace
 if(tagName==&#39;INPUT&#39; && (tagType!=&#39;TEXT&#39; && tagType!=&#39;TEXTAREA&#39; && tagType!=&#39;PASSWORD&#39;)){
  return stopIt(ev);
 }
 //input或者textarea输入框如果不可编辑则阻止Backspace
 if((tagName==&#39;INPUT&#39; || tagName==&#39;TEXTAREA&#39;) && (obj.readOnly==true || obj.disabled ==true)){
  return stopIt(ev);
 }
 }
}
function stopIt(ev){
 if(ev.preventDefault ){
 //preventDefault()方法阻止元素发生默认的行为
 ev.preventDefault();
 }
 if(ev.returnValue){
 //IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
 ev.returnValue = false;
 }
 return false;
}

Copy after login

The method comments are written very clearly, so I won’t explain too much here.

2. Call this method after the page is loaded

$(function(){
 //实现对字符码的截获，keypress中屏蔽了这些功能按键
 document.onkeypress = banBackSpace;
 //对功能按键的获取
 document.onkeydown = banBackSpace;
 })

Copy after login

Note : Key event triggering sequence: keydown -> keypress ->textInput -> keyup

There is a problem: after the select drop-down list is expanded, the keyboard event cannot be obtained. At this time, press the Backspace key , the browser will still revert to history; solution: change the select drop-down box to easyUI's combobox;

The above is the detailed content of Implement js to disable the Backspace key to make the browser go back. For more information, please follow other related articles on the PHP Chinese website!