Question

在Gmail中，例如，当按下 Ctrl + B 时，而不是将其传递给浏览器（通常会显示某种书签管理器），它为了格式化目的而劫持它，即在comoposing中间为消息ur打开粗体格式。对于 Ctrl + i ， Ctrl + u 相同。

这是怎么做到的？

Answer 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中它是event.keyCode，虽然Firefox可能支持event.keycode - 令人困惑，不是吗？）。因此，我建议通过JavaScript框架（例如Prototype或jQuery）来处理这些内容，因为它们会为您处理所有棘手的兼容性内容。

Answer 2

以下是使用jQuery的HTML页面的源代码，并执行htw's solution所做的事情。

<!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>

希望这有助于某人！

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

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

如何在javascript中劫持关键组合？

3 个答案: