Событие keyDown не запускается для Capslock на Mac

ХРОМ (52):

При включении заглавных букв - срабатывает только нажатие клавиши (нет событий в keyUp или keyPress)

При отключении заглавных букв - срабатывает только нажатие клавиши (нет событий в keyDown или keyPress)

ФАЙРЕФОКС (46):

Только событие keyDown запускается для обеих заглавных букв ON и OFF (без keyUp или keyPress)

Я прочитал о keyCodes и событиях здесь http://www.quirksmode.org/js/keys.html и в MDN здесь https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode, аааи здесь http://unixpapa.com/js/key.html

Но ни одна из приведенных выше ссылок не говорит об этом странном поведении. Ожидается ли это? Если да, то есть ли более простой способ справиться с этим?


javascript events keyboard-events dom-events capslock
person bigOmega    schedule 18.08.2016    source источник
comment
Ради интереса, для чего вы используете Caps Lock? Как пользователь, я почти не считаю Caps Lock ключом, и немного удивлен, что он вообще запускает какие-либо события!   -  person aaaidan    schedule 23.08.2016
comment
лол, я разрабатываю небольшую игру с быстрыми руками, вдохновленную дотой. Основываясь на комфорте, люди держат заглавные буквы в качестве ключа, поскольку он очень близок к W-A-S-D.   -  person bigOmega    schedule 31.08.2016
comment
Ах, я подумал, была ли это игра. Ваше здоровье. Удачи!   -  person aaaidan    schedule 31.08.2016
comment
@BharathRaja Мой ответ может помочь вам: P!   -  person Pranesh Ravi    schedule 27.09.2016

Ответы (2)


arrow_upward
3
arrow_downward

Да, это ожидаемо.

Chrome воспринимает CAPS ON как keydown, потому что он обрабатывает включение/выключение как нажатие и удержание, как если бы мы удерживали клавишу shift, которая включает заглавные буквы при поведении и выключается, когда мы отпустите его. Эта кнопка Caps Lock тоже. Когда вы включаете Caps Lock, chrome обрабатывает включение как keypress, а когда вы отключаете, как keyup. Но firefox обрабатывает все как keydown, что для меня не имеет смысла по сравнению с тем, как хром обрабатывает то же самое.

Решение

Используйте getModifierState() для получения Caps Lock. Это поддерживается в Chrome и Firefox.

Надеюсь, поможет!

$(function() {
  $(window).on("keydown", function(e){
    if (e.which === 20)
      console.log(e.originalEvent.getModifierState('CapsLock'))
  });
  $(window).on("keyup", function(e) {
    if (e.which === 20)
      console.log(e.originalEvent.getModifierState('CapsLock'))
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Focus here and press 'Caps Lock'

person Pranesh Ravi    schedule 27.09.2016
comment
Да, это похоже на самое близкое решение, которое мы могли бы получить. Хотя для игры с быстрым нажатием клавиши и таймером обработка события keyup вместо события keydown имеет огромное значение :( - person bigOmega; 27.09.2016

arrow_upward
-1
arrow_downward

Я искал ответ на очень похожий вопрос. Ответ Пранеша указал мне направление.

В моем случае я хотел предупредить пользователей, что их капслок включен, когда они входят в систему. В конечном итоге я остановился на следующем решении.

Угловой компонент:

export class AuthenticateComponent {
  public capslockOn: boolean;

  constructor() {
    this.capslockOn = false;
  }

  public keyup(event: KeyboardEvent): void {
    if (event.key === 'CapsLock') {
      // Checks / sets when the Caps Lock key is specifically pressed.
      this.capslockOn = (!this.capslockOn && event.getModifierState('CapsLock'));
    } else {
      // Checks all other conditions like the Caps Lock was on before the user
      // loaded the form and began typing in it.
      this.capslockOn = event.getModifierState('CapsLock');
    }
  }
}

Затем я просто вызываю функцию keyup из своей формы:

<form ... (keyup)="keyup($event)">

Любое нажатие клавиши в форме - имя пользователя или пароль - проверит / установит логическое значение capslockOn, и я могу *ngIf показать значок или сообщение или и то, и другое.

Спасибо за объяснение, Пранеш. Это немного помогло.

person Mark Litchfield    schedule 24.03.2019