js禁止Backspace键使浏览器后退

在项目中遇到按下Backspace键让浏览器后退的问题,上网搜了几种解决方案都不太理想。于是集众人之智,采众家之长,归纳如下:

这里主要参考博客http://q821424508.iteye.com/blog/1587025

1、在公用js中定义阻止Backspace的方法

 1 function banBackSpace(e){
 2   var ev = e || window.event;
 3   //各种浏览器下获取事件对象
 4   var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget;
 5   //按下Backspace键
 6   if(ev.keyCode == 8){
 7     var tagName = obj.nodeName //标签名称
 8     //如果标签不是input或者textarea则阻止Backspace
 9     if(tagName!='INPUT' && tagName!='TEXTAREA'){
10       return stopIt(ev);
11     }
12     var tagType = obj.type.toUpperCase();//标签类型
13     //input标签除了下面几种类型,全部阻止Backspace
14     if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){
15       return stopIt(ev);
16     }
17     //input或者textarea输入框如果不可编辑则阻止Backspace
18     if((tagName=='INPUT' || tagName=='TEXTAREA') && (obj.readOnly==true || obj.disabled ==true)){
19       return stopIt(ev);
20     }
21   }
22 }
23 function stopIt(ev){
24   if(ev.preventDefault ){
25     //preventDefault()方法阻止元素发生默认的行为
26     ev.preventDefault();
27   }
28   if(ev.returnValue){
29     //IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
30     ev.returnValue = false;
31   }
32   return false;
33 }

方法注释写的很清晰了,这里不过多解释。

2、页面加载完成就调用该方法

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

注:  按键事件触发顺序: keydown -> keypress ->textInput -> keyup

存在问题:select下拉列表展开后,无法获取键盘事件,此时按Backspace键,浏览器还是会回退到历史;解决办法:将select下拉框改为easyUI的combobox;

哪位大神有更好的解决办法请留言告知

原文地址:https://www.cnblogs.com/lujiulong/p/6019638.html