在 ExtJS 开发过程中,有一个常见的功能需求:屏蔽特定键盘按键以防止误操作。当用户通过键盘操作时,若误触 F5 刷新、Backspace 回退或 Ctrl+R 重载,正在填写的表单或编辑的数据可能瞬间丢失,这会严重影响用户体验。因此,提前阻止这些快捷键的默认行为,是一项实用的安全防护措施。
以下是一段可直接使用的示例代码,其核心思路是监听键盘事件,并在特定条件下阻止默认行为。代码中包含了两种处理机制:一是通过原生 DOM 事件拦截 Backspace(退格键),二是借助 ExtJS 自带的 KeyMap 组件控制 F5、方向键、Ctrl+R 等组合键。

Ext.onReady(function(){
Ext.WindowMgr.zseed = 10000;
Ext.QuickTips.init();
Ext.getDoc().on("contextmenu", function(e){
e.stopEvent();
});
if(document.addEventListener){
document.addEventListener("keydown",maskBackspace, true);
}else{
document.attachEvent("onkeydown",maskBackspace);
}
function maskBackspace(event){
var event = event || window.event;
var obj = event.target || event.srcElement;
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if(keyCode == 8){
if(obj!=null && obj.tagName!=null && (obj.tagName.toLowerCase() == "input"
|| obj.tagName.toLowerCase() == "textarea")){
event.returnValue = true ;
if(Ext.getCmp(obj.id)){
if(Ext.getCmp(obj.id).readOnly) {
if(window.event)
event.returnValue = false ;
else
event.preventDefault();
}
}
}else{
if(window.event)
event.returnValue = false ;
else
event.preventDefault();
}
}
}
var map = new Ext.KeyMap(document, [
{
key: [116], // F5
fn: function(){ },
stopEvent: true,
scope: this
},{
key: [37,39,115], //方向键左,右,F4
alt: true,
fn: function(){ },
stopEvent: true,
scope: this
}, {
key: [82], // ctrl + R
ctrl: true,
fn: function(){ },
stopEvent: true,
scope: this
}]);
map.enable();
});
这段代码在大多数现代浏览器上都能正常运行,但 IE8 存在特殊情况——仅靠上述 KeyMap 监听 F5 仍可能触发页面刷新。此时需要额外在 body 标签上添加一个 onkeydown 事件处理,将 F5 的 keyCode 强制改为 0 并返回 false:
下面说明几个关键点:在 maskBackspace 函数中,当焦点位于 input 或 textarea 元素时,退格键允许正常输入;但如果组件为只读状态(readOnly),则同样会阻止退格操作。KeyMap 所拦截的键位包括 F5、Alt+左右方向键(很多浏览器会将其视为历史导航)、Alt+F4(关闭窗口)以及 Ctrl+R,这些在业务系统中均属于高危操作。实际应用时,可根据具体需求灵活增删键位列表。
