我想在浏览器上捕获 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太难以在所有浏览器上运行。
答案 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)
在body (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;
}
答案 6 :(得分:0)
您是否尝试过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来搜索历史记录,而不是刷新页面。总是有用例。
答案 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并相应地编辑回调