覆盖浏览器的键盘快捷键答案

【问题标题】：Overriding Browser's Keyboard Shortcuts覆盖浏览器的键盘快捷键
【发布时间】：2011-04-10 12:04:55
【问题描述】：

我想通过拦截文档对象的 keypress 事件处理程序，而不是 accesskey 属性，为我的 Web 应用程序中的几个页面添加对键盘快捷键的支持。

问题在于每个浏览器都有自己的键盘组合，因此不可能想出一套适用于所有网络浏览器且一致的键盘组合。（例如，如果保存的快捷方式是Ctrl + Shift + S 而删除的一个是 Alt + D。）

所以我认为在我的几个页面中完全覆盖浏览器快捷方式会更简单。

抛开所有不利因素，这可能吗？如果是这样，你是怎么做到的？

【问题讨论】：

个人注意，请避免覆盖在浏览器之间保持一致的常用浏览器快捷方式，例如C-w、C-t、C-S-t... Google 的某些产品会覆盖常用浏览器快捷方式及其令人难以置信的烦人！
很难知道什么是“常用”用户快捷方式。例如，是否有很多用户使用C-e 或者覆盖是否相对较好？最好有一张图表，显示使用每个浏览器快捷方式的用户百分比。
@JKillian 确实，但是您在哪里测量截止值？ 1% 或 0.5% 的人仍然会生气。我确信 Google 的工程师知道它们是块捷径，但试图找到对更广泛的受众有用的捷径。（那么问题来了，它们对更广泛的受众有用吗？）但这些都不是适合堆栈溢出的问题！

标签： javascript

【解决方案1】：

onkeydown = function(e){
  if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
    e.preventDefault();
    //your saving code
  }
}

【讨论】：

在很多情况下，我认为这行不通。使用 'tab' 这样的键，很多浏览器会在脚本正确改变键的行为之前拦截命令。
event.preventDefault 仅在符合 W3C 的浏览器上有效（当它有效时），而不是（比如说）在一般网络上占主导地位的浏览器，微软的——当然，除非你使用像这样的库为您添加它的 jQuery。
T.J.> 你的意思是即使在 IE 上 jQuery 也可以覆盖键盘快捷键？

【解决方案2】：

这里有很好的报道：http://unixpapa.com/js/key.html

至于这是否应该做的事情，stackoverflow 的问题编辑器覆盖了相当多的键而不会破坏太多（将鼠标悬停在工具栏按钮上）。

【讨论】：

你需要用e.preventDefault(); e.stopPropagation();处理keydown事件。在处理 keydown 时要记住的一件事是，如果用户按住键的时间更长，它可能会发生多次。
您应该直接在 Stack Overflow 上回答问题，而不是链接到其他地方（外部链接可能会中断或更改或不直接回答问题）。见Are answers that just contain links elsewhere really “good answers”?。
不过，当我使用 StackOverflow 的问题编辑器时，我真的很讨厌 Ctrl-L 被盗的方式。在编辑问题时更难进行网络搜索。

【解决方案3】：

这是我对这个问题的解决方案：

大部分（如果不是全部）浏览器的快捷方式将被覆盖。只有系统的，如 Alt + Tab 或 Windows 键不会。

document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};

function overrideKeyboardEvent(e){
  switch(e.type){
    case "keydown":
      if(!keyIsDown[e.keyCode]){
        keyIsDown[e.keyCode] = true;
        // do key down stuff here
      }
    break;
    case "keyup":
      delete(keyIsDown[e.keyCode]);
      // do key up stuff here
    break;
  }
  disabledEventPropagation(e);
  e.preventDefault();
  return false;
}
function disabledEventPropagation(e){
  if(e){
    if(e.stopPropagation){
      e.stopPropagation();
    } else if(window.event){
      window.event.cancelBubble = true;
    }
  }
}

【讨论】：

这不会阻止 ALT+E 调出浏览器编辑菜单。
我们可以覆盖“ctrl + u”、“f12”吗？如果我们不能覆盖，我在想当至少按键被按下时，我会再次在内部触发事件。然后，如果它被打开，它将被关闭。

【解决方案4】：

这是我的解决方案：

document.onkeydown = function () {
                       if ((window.event.keyCode == 121) && (window.event.ctrlKey))) {
               window.event.returnValue = false;
               window.event.cancelBubble = true;
               window.event.keyCode = 0;
               return false;
           }
       }

【讨论】：

这只会更改事件键代码，所选默认键不会执行任何操作