Ext JS框架程序中阻止鍵盤(pán)觸發(fā)回退或者刷新頁(yè)面的代碼分享
更新時(shí)間：2016年06月07日 18:18:16 作者：chamcon
鍵盤(pán)上的F5或者退格鍵等按鍵一般來(lái)說(shuō)會(huì)觸發(fā)頁(yè)面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來(lái)看一下Ext JS框架程序中阻止鍵盤(pán)觸發(fā)回退或者刷新頁(yè)面的代碼分享
在 Extjs 開(kāi)發(fā)中,我們需要屏蔽一些鍵盤(pán)按鍵,來(lái)避免用戶(hù)在使用鍵盤(pán)操作的過(guò)程中不小心按到這些快捷鍵造成輸入信息丟失等問(wèn)題.
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; //標(biāo)準(zhǔn)化事件對(duì)象
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;}">
相關(guān)文章
ExtJS是一個(gè)Ajax框架，是一個(gè)用javascript寫(xiě)的，用于在客戶(hù)端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來(lái)開(kāi)發(fā)RIA也即富客戶(hù)端的AJAX應(yīng)用2008-12-12
學(xué)習(xí)ExtJS 訪問(wèn)容器對(duì)象
ExtJS 訪問(wèn)容器對(duì)象使用說(shuō)明，需要的朋友可以參考下。2009-10-10
Extjs的FileUploadField文件上傳出現(xiàn)了兩個(gè)上傳按鈕
Extjs的FileUploadField文件上傳在頁(yè)面中出現(xiàn)了兩個(gè)上傳按鈕，這個(gè)是和ext的本身css的樣式有關(guān)系，所以要將樣式修改下2014-04-04
這篇文章主要介紹了extJS中常用的4種Ajax異步提交方式,需要的朋友可以參考下2014-03-03
ExtJS 2.0實(shí)用簡(jiǎn)明教程 之Border區(qū)域布局
Border布局由類(lèi)Ext.layout.BorderLayout定義，布局名稱(chēng)為border。2009-04-04
ExtJs GridPanel簡(jiǎn)單的增刪改實(shí)現(xiàn)代碼
ExtJs GridPanel中實(shí)現(xiàn)增刪改效果的代碼，需要的朋友可以參考下。2010-08-08
ExtJS Panel常用方法，需要的朋友可以參考下。2009-10-10
一個(gè)簡(jiǎn)單的Ext.XTemplate的實(shí)例代碼
把省份與城市以樹(shù)的形式輸出的Ext.XTemplate的實(shí)例代碼，需要的朋友可以參考下2012-03-03
EXTJS FORM HIDDEN TEXTFIELD 賦值 使用value不好用的問(wèn)題
用了一個(gè)方法解決了此問(wèn)題，但是老是感覺(jué)這樣解決了很不爽，各位有沒(méi)有遇到過(guò)這種問(wèn)題，請(qǐng)指點(diǎn)一下。2011-04-04
Extjs學(xué)習(xí)筆記之九 數(shù)據(jù)模型(上）
本文開(kāi)始進(jìn)入Extjs最核心最優(yōu)秀的部分。2010-01-01