如何劫持javascript中的键组合？答案

【问题标题】：How to hijack key combos in javascript?如何劫持javascript中的键组合？
【发布时间】：2009-05-23 20:20:32
【问题描述】：

例如，在 Gmail 中，当按下 Ctrl + B 时，它不会被传递到浏览器（通常会调出某种书签管理器），它出于格式化目的而劫持它，即在撰写过程中为消息 ur 打开粗体格式。 Ctrl+i、Ctrl+u 相同。

这是怎么做到的？

【问题讨论】：

我的回答是请不要这样做......但我怀疑这就是你要找的。span>
是的，它不是 :) 实际上，我打算做的可能并没有你想象的那么糟糕：我打算将它用于本地的油脂猴子脚本。
任何人都可以还原版本 1 吗？
猫式打字是怎么回事？
过去几天这个问题到底发生了什么？

【解决方案1】：

您可以将onkeydown 或onkeyup 事件处理程序附加到全局document 对象。例如，如果我想在每次按下 Ctrl-M 时将标题栏更改为“asdf”，我会通过window.onload 注册事件处理程序，如下所示：

window.onload = function()
{
    document.onkeydown = function(event)
    {
        var keyCode;

        if (window.event) // IE/Safari/Chrome/Firefox(?)
        {
            keyCode = event.keyCode;
        }
        else if (event.which) // Netscape/Firefox/Opera
        {
            keyCode = event.which;
        }

        var keyChar = String.fromCharCode(keyCode).toLowerCase();

        if (keyChar == "m" && event.ctrlKey)
        {
            document.title = "asdf";
            return false;  // To prevent normal minimizing command
        }
    };
};

W3Schools 有更多关于使用这些事件的信息：onkeydown 和 onkeyup。

另外，我想我应该注意到浏览器之间在事件属性方面存在一些差异（例如，在 Firefox 中，您应该通过 event.which 访问键码，而在 IE 中它是 @ 987654333@，虽然 Firefox 可能支持event.keycode——令人困惑，不是吗？）。因此，我建议通过 JavaScript 框架完成这些工作，例如 Prototype 或 jQuery，因为它们会为您处理所有棘手的兼容性问题。

【讨论】：

你能举个例子吗？对于 (meta- (:P)) 示例，展示如何在使用组合键 CTRL+M 时将文档的标题更改为文本“asdf”。谢谢，非常感谢。
@asdf：当然，我为你扩展了我的答案。希望对您有所帮助。
@htw: 是的，非常感谢 :) 现在...您已经覆盖了 netscape/firefox/opera/ie，该代码是否也适用于 safari/chrome？
@asdf：是的。奇怪的是，我发现 event.keyCode 出于某种原因实际上在 Firefox 中有效，尽管 W3Schools 说它不应该……奇怪。无论哪种方式，我仍然建议您应该通过 Prototype 或 jQuery 执行此操作：有关如何在 jQuery 中执行此操作的示例，请参见 dplante 的答案。
你不应该使用preventDefault()而不是return false吗？

【解决方案2】：

这里是一个使用 jQuery 并执行 htw's solution 的 HTML 页面的源代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Hijack Example</title>
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
    </script>
    <script type="text/javascript">
        $(function(){
            document.title = "before keypress detected";
            $(document).keydown(function(event) {
                // alert('stuff happened: ' + msg + " " + event.keyCode);
                var keyChar = String.fromCharCode(event.keyCode).toLowerCase();
                if (keyChar == "m" && event.ctrlKey) {
                    document.title = "ctrl-m pressed!";
                }
            });
         });
    </script>
  </head>

  <body id="body">
    <p>Change the path to jquery above as needed (search for ../scripts/jquery-1.2.1.js)</p>
    <p>Watch the title bar, then press control-M, then watch the title bar again!</p>
  </body>
</html>

希望这对某人有所帮助！

【讨论】：

【解决方案3】：

使用onkeydown 或onkeyup 事件触发处理函数：

var body = document.getElementsByTagName("body")[0];
body.onkeydown = function(event) {
    var str = "";
    for (var prop in event) {
        str += prop + ": " + event[prop] + "<br>";
    }
    body.innerHTML = str;
};

通过它您可以看到 event 对象具有哪些属性。

【讨论】：