Как определить заглавные буквы на JavaScript

Любой пользователь может случайно включить клавишу Caps Lock. Это может привести к тому, что, например, при заполнении формы будет происходить блокировка вводимых данных. Как же определить, включены ли заглавные буквы на JavaScript? В идеале нам потребуется предусмотреть сообщение о том, что клавиша Caps Lock активирована.

Методы проверки на заглавные буквы на JavaScript

Мы можем использовать метод getModifierState(), который позволяет определять события клавиатуры. В результате, мы проверим, включил ли пользователь клавишу Caps Lock.

const myInput = document.getElementById('myInput');

myInput.addEventListener('keydown', (event) => {
  const isCapsLockOn =
    event.getModifierState && event.getModifierState('CapsLock');

  console.log(isCapsLockOn); // true
});

Чтобы лучше понять как он работает, сначала создадим input и присвоим ему id.

<input type="text" id="myInput" />

Во-первых, теперь мы создадим в JavaScript переменную со ссылкой на него. Во-вторых, получим ссылку на input через метод getElementById() для получения вводимых данных.

const myInput = document.getElementById('myInput');

После подключения прослушивателя для KeyBoardEvent, всякий раз, когда пользователь нажимает или вводит что-либо в поле ввода (события keydown или keyup). KeyBoardEvent будет передавать аргумент в addEventListener(). Затем мы применим метод getModifierState() для объекта event и передавать строку с целью определения активации клавиши Caps Lock.

const myInput = document.getElementById('myInput');

myInput.addEventListener('keydown', () => {

});

Метод getModifierState() возвращает логическое значение.

const myInput = document.getElementById('myInput');

myInput.addEventListener("keydown", (event) => {
  const isCapsLockOn =
    event.getModifierState && event.getModifierState('CapsLock');

  console.log(isCapsLockOn); // true
});

В таком случае мы легко определим, включил или выключил пользователь Caps Lock при введении данных в input.

Читайте также: Как использовать стрелочные функции в JavaScript.

Заключение

Стоит отметить, что этот метод используется достаточно редко, поэтому для изучения его возможностей стоит обратиться к документации W3C.

Кроссбраузерность

Метод getModifierState() имеет полную поддержку браузерами.