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

在 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;}">
赞 (0)

相关推荐

  • 禁止刷新，回退的JS

    <script language="JavaScript"> //禁止刷新,回退 function onKeyDown() { if ( (event.altKey) || ((event.keyCode == 8) && (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.sr

  • js禁止浏览器的回退事件

    直接来个终极方案: 查找了好多资料才找到的,这种方式,可以消除 后退的所有动作.包括 键盘.鼠标手势等产生的后退动作. <script language="javascript"> //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);

  • js判断当页面无法回退时关闭网页否则就history.go(-1)

    在做一个Web项目时遇到一个需求,当页面没有前驱历史记录时(就是当前为新弹出的页面,没法做goback操作即history.go(-1)),点击返回按钮时直接关闭页面,否则就退回到前一页. 遇到的问题就是如何判断 是否有history可以回退,这个非常麻烦,因为没有这样的函数直接能获取到,只能通过history.length这个变量做变通的处理,但是对于IE,和非IE的length的返回值不同,ie: history.length=0, 非IE的为1,因此写了一个函数实现前面所需求的这个功能.分

  • js监控IE火狐浏览器关闭、刷新、回退、前进事件

    <html> <head> <title>test</title> <script language ="javaScript"> <!--关闭浏览器 --> var flag = true; window.onbeforeunload = function () { if (flag) { var evt = window.event || arguments[0]; var userAgent = naviga

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

    在 Extjs 开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘操作的过程中不小心按到这些快捷键造成输入信息丢失等问题. Ext.onReady(function(){ Ext.WindowMgr.zseed = 10000; Ext.QuickTips.init(); Ext.getDoc().on("contextmenu", function(e){ e.stopEvent(); }); if(document.addEventListener){ document.add

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • 小程序中实现excel数据的批量导入的示例代码

    小程序中实现excel数据的批量导入的示例代码

    目录 1 建立数据源 2 编制入库的代码 2.1 创建低码方法 2.2 低码中调用连接器 3 最终的代码 4 总结 我们上一篇介绍了如何利用微搭的自定义连接器接入腾讯文档的数据,光有接入是不够的,更重要的是我们需要将采集的数据积累下来,变成企业的数字资产. 积累数据最好的方式就是把数据存入数据库,低码工具除了有可视化编程的便利外,还提供了线上的文档型数据库.文档数据库比传统数据库的优势是,文档数据库的返回结构是JSON格式,直接就可以在前端进行渲染.关系型数据库还得通过代码进行转译. 另外一个方

  • vue 使用mescroll.js框架实现下拉加载和上拉刷新功能

    以下是代码是在项目中抽取出来的,都是实现下拉刷新上拉加载的要点. 注:以下不是用vue-cli写的,用vue-cli的请绕过,抱歉~ 1.mescroll 的页面的初始化 initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回调函数 }, up:{ callback: _this.upCallback,

  • JS基于Location实现访问Url、重定向及刷新页面的方法分析

    本文实例讲述了JS基于Location实现访问Url.重定向及刷新页面的方法.分享给大家供大家参考,具体如下: js通过Location实现访问Url,重定向,刷新页 web中经常会使用到刷新页面,访问url.重定向请求的功能. javascript提供了许多方法访问,修改当前用户在浏览器中访问的url.所有的这些技术都是基于location对象的.它是作为window对象的属性.你可以生成一个包含当前url的新location对象: var currentURL=window.location

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • Ext JS框架中日期函数的用法及日期选择控件的实现

    Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能. 基本函数: Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. Ext.Date.between(date, start, end) 判断date是否在start和end之间. Ext.Date.clearTime(date, clone) 把date的时间设置成

  • 微信小程序中插入激励视频广告并获取收益(实例代码)

    最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 . 激励式视频广告 用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 "关闭广告" 按钮),将获得该小程序下发的奖励.广告触发场景与奖励内容均由流量主自定义. 新建广告位 首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告. 插入广告

  • node.js chat程序如何实现Ajax long-polling长链接刷新模式

    废话不多说,开始今天的主题.纵观这个程序,感觉它的最可贵之处,在于展示了,如何用nodejs实现长链接模式的刷新技术. (这个程序不详细介绍,重点讲解这个功能) Client.js 首先看一段核心代码: 复制代码 代码如下: function longPoll (data) { //....此处省略**行 $.ajax({ cache: false , type: "GET" , url: "/recv" , dataType: "json" ,

  • js 刷新页面的代码小结 推荐

    1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<script

随机推荐