Захоплення натискання клавіші, не розміщуючи елемент введення на сторінці?


77

Як зафіксувати натискання клавіші, наприклад, Ctrl + Z, не розміщуючи елемент введення на сторінці в JavaScript? Здається, що в IE події натискання клавіш та клавіатури можуть бути прив'язані лише до елементів введення (поля введення, текстові області тощо)


5
@Tim: Оскільки було б нетрадиційно виконувати дії, коли ці комбінації клавіш натискаються, коли елемент графічного інтерфейсу не знаходиться у фокусі, тим самим порушуючи Принцип найменшого сюрпризу.
— Легкі перегони на орбіті

5
@Tomalak: Є й інші елементи, для яких можна обґрунтовано захотіти обробляти ключові події, наприклад <canvas>, хоча я погоджуюсь, що будь-який такий елемент повинен бути змушений фокусуватись перед тим, як випускати ключові події. Використання tabindexатрибута дозволить елементу отримати фокус, якщо він інакше не може.
— Тім Даун

2
Я б порекомендував бібліотеку JavaScript Keypress: dmauro.github.io/Keypress
— xinthose

1
Іншою причиною захоплення введення з клавіатури є те, що ваш єдиний штрих-код відображається на екрані та використовується сканер штрих-коду як введення з клавіатури. Що я і роблю.
— Роберт

У більшості програм є комбінації клавіш без фокусу введення. Здоровий глузд. Наприклад, CTRL-Z означає UNDO.
— Epirocks

Відповіді:


41

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

Інший спосіб зробити це - використовувати подію клавіатури та відстежувати event.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>");
});

1
не знав, що може вловити натискання клавіші так само, як клацання миші! І не могли б ви сказати мені, як отримати код ключа 26?
— powerboy

2
код клавіші 26 - це конкретний ідентифікатор "який", встановлений подією натискання клавіші (вказує CTRL + z). Щоб побачити більше відображення символів на подію натискання клавіші, подивіться на тих Jquery Docs або ключа тестера подій unixpapa в
— Trafalmadorian

Дякую. Я знаю, що означає код ключа. Я маю на увазі, 17 - це Ctrl, 90 - Z, тоді як ви отримали число 26? Я просто погуглив, але не зміг знайти відповіді.
— powerboy

Використовуйте ті посилання, які я розмістив у своєму коментарі, щоб перевірити коди різних натискань клавіш.
— Трафальмадоріан

2
Я не думаю, що питання стосувалось jQuery. Зовсім непотрібно для цього завантажувати бібліотеку. Ось так розробники нового покоління вже не знають, як кодувати.
— FlorianB

68

Для недрукованих клавіш, таких як клавіші зі стрілками та комбінації клавіш, таких як 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 .


@hendrik: Я не розумію, чому не повинен, але наразі я не можу це перевірити.
— Тім Даун


16

Виявлення натискання клавіші, включаючи комбінації клавіш:

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

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


8

Код і виявляє ctrl + z

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.