Захватить нажатие клавиши без размещения элемента ввода на странице?

Question

Как записать нажатие клавиши, например, Ctrl + Z, без размещения элемента ввода на странице в JavaScript? Кажется, что в IE события keypress и keyup могут быть связаны только с элементами ввода (полями ввода, текстовыми областями и т. Д.)

Answer 1

Для непечатаемых клавиш, таких как клавиши со стрелками и сочетания клавиш, таких как Ctrl-z, Ctrl-x, Ctrl-c, которые могут вызывать некоторые действия в браузере (например, внутри редактируемых документов или элементов), вы не можете получить событие нажатия во всех браузерах. По этой причине вы должны использовать keydown вместо этого, если вы заинтересованы в подавлении действия браузера по умолчанию. Если нет, то keyup будет так же хорошо.

Присоединение события keydown к document работает во всех основных браузерах:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

Для полной справки я настоятельно рекомендую статью Яна Вольтера об обработке ключей JavaScript .

Answer 2

jQuery также имеет отличную реализацию, невероятно простую в использовании.Вот как вы можете реализовать эту функцию в разных браузерах:

$(document).keypress(function(e){
    var checkWebkitandIE=(e.which==26 ? 1 : 0);
    var checkMoz=(e.which==122 && e.ctrlKey ? 1 : 0);

    if (checkWebkitandIE || checkMoz) $("body").append("<p>ctrl+z detected!</p>");
});

Протестировано в IE7, Firefox 3.6.3 и Chrome 4.1.249.1064

Еще один способ сделать это - использовать событие keydown иотслеживать событие.keyCode.Однако, поскольку jQuery нормализует keyCode и charCode, используя event.which, их спецификация рекомендует использовать event.which в различных ситуациях:

$(document).keydown(function(e){
if (e.keyCode==90 && e.ctrlKey)
    $("body").append("<p>ctrl+z detected!</p>");
});

Answer 3

Обнаружение нажатия клавиш, включая комбинации клавиш:

window.addEventListener('keydown', function (e) {
  if (e.ctrlKey && e.keyCode == 90) {
    // Ctrl + z pressed
  }
});

Преимущество здесь в том, что вы не перезаписываете какие-либо глобальные свойства, а просто вводите побочный эффект. Не хорошо, но определенно гораздо менее гнусно, чем другие предложения здесь.

Answer 4

Код & обнаруживает Ctrl + Z

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}

Answer 5

Для современных JS используйте event.key!

document.addEventListener("keypress", function onPress(event) {
    if (event.key === "z" && event.ctrlKey) {
        // Do something awesome
    }
});

Документы Mozilla

Поддерживаемые браузеры

Answer 6

document.onkeydown = KeyDown;

document.onkeypress = Keypress;

и т.д.

У меня работает в IE