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


Posted in Javascript onJune 07, 2016

在 Extjs 开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘操作的过程中不小心按到这些快捷键造成输入信息丢失等问题.

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 ; //or event.keyCode=0  
                else  
                  event.preventDefault();  //for ff  
              }  
            }  
          }else{  
            if(window.event)  
              event.returnValue = false ;  // or event.keyCode=0  
            else  
              event.preventDefault();  //for ff  
          }  
        }  
      }  
        
      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中使用 F5 刷新还需加上代码 :

<body onkeydown="if(event.keyCode==116){event.keyCode=0;return false;}">
Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
js获取域名的方法
Jan 27 Javascript
JSON相关知识汇总
Jul 03 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
vue实现分页栏效果
Jun 28 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
JavaScript基础语法之js表达式
Jun 07 #Javascript
JavaScript必看小技巧(必看)
Jun 07 #Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 #Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 #Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 #Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 #Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 #Javascript
You might like
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php表单处理操作
2017/11/16 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
户籍证明的格式
2014/01/13 职场文书
区级文明单位申报材料
2014/05/15 职场文书
中学语文教学反思
2016/02/16 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Python创建SQL数据库流程逐步讲解
2022/09/23 Python