本文介绍如何在项目中通过 JavaScript 阻止 Backspace 键触发浏览器后退。核心思路是在全局监听 keydown 和 keypress 事件，判断按键代码是否为 8（Backspace）。若当前焦点不在 input 或 textarea 等可编辑控件上，则调用 preventDefault() 或设置 returnValue 为 false 来阻止默认行为。文章还指出了 select 下拉框在展开时无法捕获键盘事件的兼容性问题，并建议替换为 easyUI 的 combobox 以彻底解决。
问题背景与解决思路
在开发过程中，经常会遇到按下 Backspace 键导致浏览器意外后退的问题。经过搜索多种解决方案，发现不少方法存在局限性。因此，结合多种思路整理出以下较为完善的实现方式。
核心代码实现
第一步，在公共的 JavaScript 文件中定义一个用于阻止 Backspace 键的方法。
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!='INPUT' && tagName!='TEXTAREA'){
return stopIt(ev);
}
var tagType = obj.type.toUpperCase();//标签类型
//input标签除了下面几种类型，全部阻止Backspace
if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){
return stopIt(ev);
}
//input或者textarea输入框如果不可编辑则阻止Backspace
if((tagName=='INPUT' || tagName=='TEXTAREA') && (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;
}该方法的注释说明已经非常详尽，此处不再赘述具体细节。
调用时机与事件顺序
第二步，在页面加载完成后立即调用上述定义的方法，以确保全局生效。
$(function(){
//实现对字符码的截获，keypress中屏蔽了这些功能按键
document.onkeypress = banBackSpace;
//对功能按键的获取
document.onkeydown = banBackSpace;
})
需要注意的是，浏览器触发按键事件的顺序依次为：keydown、keypress、textInput 和 keyup。
兼容性问题与替代方案
该方案存在一个已知问题：当 select 下拉列表处于展开状态时，无法捕获键盘事件，此时按下 Backspace 键，浏览器仍会执行后退操作。解决此问题的办法是将普通的 select 下拉框替换为 easyUI 的 combobox 组件。
以上即为 JavaScript 禁止 Backspace 键使浏览器后退的完整实现方法，希望能为读者提供参考。