代码之家 › 专栏 › 技术社区 › airportyh

有没有一种方法可以使用javascript在IE上捕获/覆盖ctrl-r或f5?

internet-explorer javascript

airportyh · 技术社区 · 15 年前

我想捕捉 Ctrl键 - R 或 F5 浏览器上的快捷方式,以阻止其执行浏览器刷新,而不是执行自定义刷新。

我能捕捉到 Ctrl键 - R 在Safari和FF上使用:

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

但这对IE不起作用。有什么办法在IE上做这个吗?

更新:对于那些问我为什么要这样做的人:我只是想做一个自定义的应用刷新,但想避免有一个“刷新”按钮,因为我有点不鼓励使用刷新(我们有一个全页的flex应用程序)。最后我们切换到了f8,因为f5太难在所有浏览器上工作了。

8 回复 | 直到 9 年前

Dave Jarvis James Eichele 13 年前

开放式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();">

Dave Jarvis James Eichele 12 年前

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

Internet Explorer 有某些键不能被重写,某些键(即使被重写)仍执行默认行为,如切换到全屏模式的f11键和打开帮助窗口的f1键。

铬根本不允许使用关键事件。

火狐是最温和的,但仍然是粗略的-像Internet Explorer;仍然有一些键和默认行为您不能覆盖。

最后…… 歌剧 …这和Internet Explorer一样困难。

默认行为在不同版本之间是不同的。就像走进一个矿区……蒙上眼睛:)

尝试重写 CTRL + R / F5 闻起来像是坏设计。

你想解决什么问题?

Luke Rinard 15 年前

既然已经讨论了“如何”这个问题,我想我应该提到,您必须了解在这种情况下使用JavaScript的局限性。

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

因此,您所找到的解决方案可能有效,但在某种程度上,只要使用基本的浏览器功能,就几乎是普遍可行的。

Zoidberg 15 年前

yui有一个可以在所有浏览器中使用的键处理程序

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

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

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

Havenard 15 年前

我怀念 document.body.onbeforeunload 就是这样。您甚至可以阻止用户使用它离开页面。只是不知道如何检测它是否是一个刷新,或者他是否真的在其他地方冲浪(document.location可能?)

nickhar 12 年前

对于 F11 关于IE 为正文添加onkeydown事件的checkkey (onkeydown='return checkKey(event)' )

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;
}

Jeff Ward 11 年前

你试过了吗? keyCode == 82 不是 114 是吗? Key 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匹配来搜索历史,而不是刷新页面。总是有用例。

-1

Wheelchair Geek 9 年前

我仅仅通过使用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]);
});

只需添加希望截获的密钥代码,并相应地编辑回调