Как угнать комбинации клавиш в javascript? - PullRequest
Новая
       12

Как угнать комбинации клавиш в javascript?

1 голос
/ 24 мая 2009

Например, в Gmail, когда кто-то нажимает Ctrl + B , вместо того, чтобы передавать его в браузер (который обычно вызывает какой-то менеджер закладок), он перехватывает его для целей форматирования, т.е. включает жирное форматирование для сообщения в середине создания. То же самое для Ctrl + i , Ctrl + u .

Как это сделать?

Ответы [ 3 ]

8 голосов
/ 24 мая 2009

Вы бы прикрепили обработчик событий onkeydown или onkeyup к глобальному объекту document. Например, если бы я хотел, чтобы строка заголовка менялась на «asdf» при каждом нажатии Ctrl-M, я бы регистрировал обработчик событий через 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 , так как они позаботятся обо всех проблемах совместимости icky.

3 голосов
/ 24 мая 2009

Вот исходный код HTML-страницы, которая использует jQuery и выполняет то, что делает htw . 

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

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 24 мая 2009

Используйте событие 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 .

...