有没有办法使用Javascript在IE上捕获/覆盖Ctrl-R或F5?

时间:2009-09-09 15:53:07

标签: javascript internet-explorer

我想在浏览器上捕获 Ctrl - R F5 快捷方式,以防止它执行浏览器刷新,而是执行自定义刷新。

我可以使用以下方法在Safari和FF上捕获 Ctrl - R

document.onkeypress = function(e){
      if ((e.ctrlKey || e.metaKey) && e.keyCode == 114) // Ctrl-R
    e.preventDefault();
}

但这不适用于IE。在IE上有什么办法吗?

更新:对于那些首先要问我为什么这样做的人:我只是想做一个自定义应用刷新,但是想避免使用“刷新”按钮,因为我有点不鼓励使用刷新(我们有一个完整的页面灵活应用程序)。我们最终切换到F8,因为F5太难以在所有浏览器上运行。

8 个答案:

答案 0 :(得分:8)

打开JavaScript

http://www.openjs.com/scripts/events/keyboard_shortcuts/

对于某些键(F1,F4),您必须打开一个没有地址栏的新浏览器窗口。

示例

打开一个没有装饰的新窗口:

window.open( 'webpage.html', 'TLA', 
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=665' );

使用该库的JavaScript:

var FALSE_FUNCTION = new Function( "return false" );

/**
 * Called to disable F1, F3, and F5.
 */
function disableShortcuts() {
  // Disable online help (the F1 key).
  //
  document.onhelp = FALSE_FUNCTION;
  window.onhelp = FALSE_FUNCTION;

  // Disable the F1, F3 and F5 keys. Without this, browsers that have these
  // function keys assigned to a specific behaviour (i.e., opening a search
  // tab, or refreshing the page) will continue to execute that behaviour.
  //
  document.onkeydown = function disableKeys() {
    // Disable F1, F3 and F5 (112, 114 and 116, respectively).
    //
    if( typeof event != 'undefined' ) {
      if( (event.keyCode == 112) ||
          (event.keyCode == 114) ||
          (event.keyCode == 116) ) {
        event.keyCode = 0;
        return false;
      }
    }
  };

  // For good measure, assign F1, F3, and F5 to functions that do nothing.
  //
  shortcut.add( "f1", FALSE_FUNCTION );
  shortcut.add( "f3", FALSE_FUNCTION );
  shortcut.add( "f5", FALSE_FUNCTION );
}

内部webpage.html

<body onload="disableShortcuts();">

答案 1 :(得分:4)

没有可靠的方法来覆盖浏览器中的功能键。

Internet Explorer 具有无法覆盖的某些键,某些键 - 即使被覆盖 - 仍然执行默认行为 - 如F11键,切换到全屏模式,以及打开帮助窗口的F1键。

Chrome 根本不允许您使用键事件。

FireFox 是最好的,但仍然是粗略的 - 就像Internet Explorer;仍然存在一些你无法覆盖的键和默认行为。

最后.. Opera ..这和Internet Explorer一样困难。

默认行为因版本而异。这就像走进一个矿场......被蒙住眼睛...... :)

试图覆盖 CTRL + R / F5 闻起来像是糟糕的设计。

你想解决什么问题?

答案 2 :(得分:2)

由于已经涵盖了“如何”,我想我会提到你必须意识到使用Javascript这样的限制。

例如,在Safari(可能还有其他)中,如果您可以访问浏览器的搜索输入字段,您仍然可以发出快捷键命令,但这超出了Javascript的范围。如果用户这样做,您编写的任何关键事件代码将不会被调用,并且按键将完成。

因此,您找到的解决方案可能会起作用,但通过使用基本的浏览器功能,几乎可以通过某种方式消除这些解决方案。

答案 3 :(得分:1)

YUI有一个适用于所有浏览器的密钥处理程序

http://developer.yahoo.com/yui/examples/container/keylistener.html

我认为上面代码的问题是IE没有将事件传递给函数。它将它放在一个名为window.event的全局变量中。

我建议尝试YUI密钥监听器,它将是一个非常干净的解决方案,您不需要使用整个库,只需要您需要的部分。

答案 4 :(得分:1)

我beleave document.body.onbeforeunload就是这样。您甚至可以阻止用户离开页面。只是不确定如何检测它是否刷新或者他是否实际冲到其他地方(document.location可能?)

答案 5 :(得分:0)

IE上的 f11

在body (onkeydown='return checkKey(event)' )

的onkeydown事件上添加checkkey
function checkKey(e) {
 var alt =  e.altKey;
 var key = e.keyCode;
 var type = e.srcElement.type;
 ctrl = event.ctrlKey

 if ( alt || ((key == 8)&&(type != "text" && type != "textarea" && type != "password")) || (ctrl&&(key == 82)) || (key == 122) ) {
     event.keyCode = 0;
     e.keyCode = 0;
  event.returnValue = false;
                return false;
            }

        return true;
}

答案 6 :(得分:0)

您是否尝试过keyCode == 82,而不是114Key codes与ASCII / charCodes不同,因此没有大写/小写的考虑。

这对我有用(好吧,从技术上讲,我将它与JQuery keydown处理程序一起使用,而不是document.onkeypress):

document.onkeypress = function(e){
  if ((e.ctrlKey || e.metaKey) && e.keyCode == 82) // Ctrl-R
  e.preventDefault();
}

对于那些哭泣“糟糕的设计”的人 - 我正在构建一个终端模拟器,并希望CTRL-R匹配Bash CTRL-R来搜索历史记录,而不是刷新页面。总是有用例。

答案 7 :(得分:-1)

我设法通过仅使用JavaScript核心来解决类似的问题。代码分为两部分,定义和实现,但如果需要,可以合并部分。

<强>定义

/**
 * addKeyActions takes an array of objects that looks like this:
 * 
 * {
 *  keyCodes: [120], //F9
 *  modifiers: ['ctrlKey', 'shiftKey', 'altKey', 'altGraphKey', 'metaKey'], //Only legal modifiers
 *  callback: function(event){};
 * }
 * 
 * A good resource to find the keycodes you are looking for is:
 * http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
 * 
 * However, there are more keycodes than written on this page, so if you can't find what you are looking for, 
 * I have provided a function that you can call to display the keycode for the current button pressed - alertKeyCodes
 * 
 * 
 * @Version 1.01
 */


/*
 * --HOW TO USE--
 * 
var allModifiersKeys = {
  keyCodes: [120, 121], //F9, F10
  modifiers: ['ctrlKey', 'shiftKey', 'altKey'],
  callback: function(event){alert("All modifiers pressed + Function-button!");}
};

var altKeys = {
  keyCodes: [122, 123], //F11, F12
  modifiers: ['altKey'],
  callback: function(event){alert("ALT pressed + Function-button!");}
};

var shiftCtrlKeys = {
  keyCodes: [116, 117], //F5, F6
  modifiers: ['ctrlKey', 'shiftKey'],
  callback: function(event){alert("CTRL+SHIFT+Function-button pressed!");}
};

var noModifierKeys = {
  keyCodes: [118, 119], //F7, F8
  callback: function(event){preventDefaultEventPropagation(); alert("Function-button!");} //Do not forget to also declare the preventDefaultEventPropagation-function 
  //that is listed below for this example to work
};

addKeyActions([allModifiersKeys, altKeys, shiftCtrlKeys, noModifierKeys]);

*/

function addKeyActions(key){

    document.onkeydown = function(){
        var matchingKeyCode = findMatchingKeyCode();
        var match = matchModifiers(matchingKeyCode);
        if(match){
            matchingKeyCode.callback(event);
        }
    };

    function findMatchingKeyCode(){
        var eventKeyCode = event.keyCode || event.which || event.charCode;
        var returnVal;
        for(var i=0; i<key.length; i++){
            var tempKey = key[i];
            var containsKeyCode = isValueInArray(eventKeyCode, tempKey.keyCodes);
            if(containsKeyCode){
                returnVal = tempKey;
            }
        }
        return returnVal;
    }

    function isValueInArray(value, array){
        var hasValue = false;
        for(var i=0; i < array.length; i++){
            var tempValue = array[i];
            if(tempValue === value){
                hasValue = true;
            }
        }
        return hasValue;
    }

    function matchModifiers(key){
        var match = false;
        if(key != undefined){
            match = true;
            if(key.modifiers instanceof Array){
                for(var i=0; i<key.modifiers.length; i++){
                    var modifier = key.modifiers[i];
                    match = match && event[modifier];   
                }
            }
        }
        return match;
    }
}

/**
 * Useful callbacks/functions are listed below 
 */
function preventDefaultEventPropagation(){

    if(event.cancelBubble) event.cancelBubble = true;
    if(event.stopPropagation) event.stopPropagation();
    if(event.preventDefault) event.preventDefault();

    event.returnValue = false;
    event.keyCode = 0;
    return false;
}

/**
 * Useful methods during developement 
 */
function alertKeyCodes(){
    document.onkeydown = function(){
        alert(event.keyCode || event.which || event.charCode);
        if(event.cancelBubble) event.cancelBubble = true;
        if(event.stopPropagation) event.stopPropagation();
        if(event.preventDefault) event.preventDefault();

        event.returnValue = false;
        event.keyCode = 0;
        return false;
    };
}

<强>实施

$(document).ready(function() {
        var SingleKeys = {
            keyCodes: [114, 116, 121, 122], //F3, F5, F10, F11
            callback: function(event){return preventDefaultEventPropagation();}
        };

        var BackspaceKeys = {
            keyCodes: [8], //Backspace
            callback: function(event){
                var sourceOfEvent = event.target || event.srcElement;
                if(sourceOfEvent.tagName == "BODY"){
                    return preventDefaultEventPropagation();
                }
            }
        };
        var EnterKeys = {
                keyCodes: [13], //Enter
                callback: function(event){
                    var sourceOfEvent = event.target || event.srcElement;
                    if(sourceOfEvent.tagName == "BODY"){
                        return preventDefaultEventPropagation();
                    }
                    if(sourceOfEvent.tagName == "INPUT" && sourceOfEvent.type == "text"){
                        return preventDefaultEventPropagation();
                    }
                }
        };

        var AltKeys = {
            keyCodes: [36, 37, 39], //Home, Left, Right
            modifiers: ['altKey'],
            callback: function(event){return preventDefaultEventPropagation();}
        };

        var CtrlKeys = {
            keyCodes: [66, 68, 69, 72, 73, 76, 78, 79, 82], //B, D, E, H, I, L, N, O, R
            modifiers: ['ctrlKey'],
            callback: function(event){return preventDefaultEventPropagation();}
        };

        addKeyActions([SingleKeys, BackspaceKeys, EnterKeys, AltKeys,CtrlKeys]);
}); 

只需添加您希望拦截的keyCode并相应地编辑回调