游乐游手机版
首页/前端开发/文章详情

Ext JS阻止键盘触发后退或刷新页面代码实现

时间:2026-06-12 06:54
在 ExtJS 开发过程中,有一个常见的功能需求:屏蔽特定键盘按键以防止误操作。当用户通过键盘操作时,若误触 F5 刷新、Backspace 回退或 Ctrl+R 重载,正在填写的表单或编辑的数据可能瞬间丢失,这会严重影响用户体验。因此,提前阻止这些快捷键的默认行为,是一项实用的安全防护措施。 以下

在 ExtJS 开发过程中,有一个常见的功能需求:屏蔽特定键盘按键以防止误操作。当用户通过键盘操作时,若误触 F5 刷新、Backspace 回退或 Ctrl+R 重载,正在填写的表单或编辑的数据可能瞬间丢失,这会严重影响用户体验。因此,提前阻止这些快捷键的默认行为,是一项实用的安全防护措施。

以下是一段可直接使用的示例代码,其核心思路是监听键盘事件,并在特定条件下阻止默认行为。代码中包含了两种处理机制:一是通过原生 DOM 事件拦截 Backspace(退格键),二是借助 ExtJS 自带的 KeyMap 组件控制 F5、方向键、Ctrl+R 等组合键。

Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享

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,这些在业务系统中均属于高危操作。实际应用时,可根据具体需求灵活增删键位列表。

来源:https://www.jb51.net/article/86130.htm
上一篇Ext JS框架日期函数用法与日期选择控件实现 下一篇ExtJS 4.2 Grid单元格合并实现技巧
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Layui弹出层监听子页面键盘快捷键实现方法
前端开发 · 2026-07-06

Layui弹出层监听子页面键盘快捷键实现方法

子页面键盘事件监听需在DOM加载完成后绑定,父页无法直接监听子页按键,必须由子页自身监听后通过parent或postMessage通知父页。典型写法为子页调用父页已定义的关闭函数。需注意焦点状态、输入法及layui版本兼容性等陷阱。

Layui表单提交时携带当前页面Meta信息的实现方法
前端开发 · 2026-07-06

Layui表单提交时携带当前页面Meta信息的实现方法

Layui表单提交不会自动携带页面Meta信息,需在form on( submit )回调中手动读取meta内容并拼接到表单数据,注意后端字段映射及特殊字符编码,多meta时按需选取。

HTML5拖拽事件流状态转移监控调试
前端开发 · 2026-07-06

HTML5拖拽事件流状态转移监控调试

HTML5拖拽事件流易因漏监听或未调用preventDefault而中断。需掌握dragstart设置数据、dragover接受放置、drop触发条件等关键点。通过统一日志捕获事件上下文、识别常见状态丢失场景并配合可视化面板,可清晰定位拖拽过程断点。

uni-app实现小红书商品详情图卡片切换
前端开发 · 2026-07-06

uni-app实现小红书商品详情图卡片切换

通过手写touch事件与transform控制五张卡片,动态计算translateX、scale、opacity及z-index模拟层叠滑动效果。滑动距离超过80rpx触发切换,否则复位。图片仅渲染当前及前后两张,有效优化加载性能与渲染效率。

图像旋转倾斜与扭曲的Canvas像素矩阵变换
前端开发 · 2026-07-06

图像旋转倾斜与扭曲的Canvas像素矩阵变换

Canvas图像变形本质是操作坐标系,图像被动跟随。旋转需先平移原点至目标中心再旋转后复位;倾斜通过仿射变换矩阵实现;扭曲无原生API,可用分块模拟或转用WebGL。每次变换前保存状态,完成后恢复,避免坐标系偏移。