Обнаружение и печать сочетаний клавиш Javascript - PullRequest
Новая
       12

Обнаружение и печать сочетаний клавиш Javascript

1 голос
/ 03 октября 2019

В настоящее время я пытаюсь преобразовать предоставленные пользователем комбинации клавиш в их печатные версии (например, если пользователь нажимает клавиши shift + a, я хочу иметь возможность обнаружить его и напечатать где-нибудь строку «shift + a»), чтобыпользователь знает, какую комбинацию он связал с действием.

До сих пор я использовал предоставленные логические значения: ctrlKey, altKey, shiftKey и metaKey, и когда они верны, я добавляю их версии для печати в финальную версию. string.

Это работает ... до некоторой степени ...

Я правильно получаю флаг ctrl, но флаг сдвига ошибочен (дает сдвиги, когда это не следует, и не дает сдвиги, когдаДолжно быть, хотя он работает нормально для некоторых клавиш), и флаг alt, кажется, работает только на нескольких клавишах, и мета-флаг, кажется, не работает вообще. Обратите внимание, что моя клавиатура работает должным образом, то есть эти клавиши работают как задуманов нормальных условиях (клавиша Shift позволяет мне использовать заглавные буквы, клавиша win позволяет мне заблокировать компьютер и т. д.). Также обратите внимание, что моя клавиатураard - azerty.

На примере W3schools ведет себя так же:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_shiftkey

Вот пример:

пытаясь с &, который не требует сдвига на azerty

пытаясь с 1, который требует сдвига на azerty

Так что я предполагаю, что есть что-тоЯ недоразумение в способе обнаружения сочетаний клавиш. Спасибо всем, кто захочет помочь. 

function logKey(e) {
    var modifier1;
    var modifier2;
    var modifier3;
    var modifier4;
    var display = "";

    if (e.ctrlKey) {
        modifier1 = "ctrl + ";
    }
    else {
        modifier1 = "";
    }
    if (e.altKey) {
        modifier2 = "alt + ";
    }
    else {
        modifier2 = "";
    }
    if (e.shiftKey) {
        modifier3 = "shift + ";
    }
    else {
        modifier3 = "";
    }      
    if (e.metaKey) {
        modifier4 = "meta + ";
    }
    else {
        modifier4 = "";
    }

    display = modifier1 + modifier2 + modifier3 + modifier4 + e.key

    window.alert(display);
}
window.addEventListener('keydown', logKey);

Ответы [ 2 ]

1 голос
/ 03 октября 2019

Как намекает skyline3000 в их комментарии, вам, вероятно, лучше самостоятельно отслеживать, какие клавиши были нажаты, а затем, когда они вам нужны, просто посмотреть на то, что вы отследили.

Что-то вроде этого: 

const input = document.querySelector('input');
const keysDown = [];

input.addEventListener('keydown', e => {
  if (keysDown.indexOf(e.keyCode) === -1) {
    keysDown.push(e.keyCode);
  }
  
  console.log(keysDown);
});

input.addEventListener('keyup', e => {
  const index = keysDown.indexOf(e.keyCode);
  
  if (index !== -1) {
    keysDown.splice(index, 1);
  }
  
  console.log(keysDown, e);
});
Focus on input to register keys:
<input />

Это позволит вам более точно отслеживать их и даже сразу отслеживать множество клавиш.

Затем, когда вы захотитепоказать какие клавиши они нажали, просто распечатайте список keysDown.

0 голосов
/ 05 октября 2019

Итак ...

Я вернулся к проблеме сегодня и понял, что проблема даже не ограничивается этими логическими значениями. Даже если я игнорирую логические значения и пытаюсь использовать коды клавиш для регистрации нажатых клавиш-модификаторов, это не работает (с использованием кода @samanime), по крайней мере, в Firefox, потому что, по-видимому, мой firefox не вызывает нажатие клавиш / нажатие клавиш (или нажатие клавиш)событие, когда я нажимаю клавиши-модификаторы, такие как Ctrl или Alt. Он срабатывает нормально на других клавишах, например, на символьных.

Хотя он работает и в Chrome.

Есть ли проблемы с совместимостью, о которых я не знаю? Или это мой Firefox, который как-то имеет проблемы?

...