Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Предположим, что мы хотим, чтобы пользователи знали, включена ли блокировка заглавных букв, когда они вводят значение для ввода (например, поле пароля):
<input type="text" id="textbox" />
<div id="message" />
Элемент message будет использоваться для отображения сообщения.
1. Используйте функцию getModifierState()
Функция getModifierState() возвращает состояние заданной клавиши-модификатора. Он может сообщить нам, нажата ли клавиша CapsLock, вызвав getModifierState('CapsLock').
const textboxEle = document.getElementById('textbox');
const messageEle = document.getElementById('message');
textboxEle.addEventListener('keydown', function(e) {
const capsLockOn = e.getModifierState('CapsLock');
// Update the content of message
messageEle.innerHTML = capsLockOn ? 'Caps lock is ON' : '';
// Show or hide the message based on the CapsLock state
messageEle.style.display = capsLockOn ? 'block' : 'none';
});
Этот подход не поддерживает случай, когда пользователи нажимают клавишу Shift.
2. Поддержка клавиши Shift
Блокировка заглавных букв считается включенной, если пользователи нажимают
- заглавная буква без Shift
- или строчная буква с Shift
const textboxEle = document.getElementById('textbox');
const messageEle = document.getElementById('message');
textboxEle.addEventListener('keypress', function(e) {
const isMac = /Mac/.test(navigator.platform);
const keyCode = e.keyCode || e.which;
// Is the _Shift_ key pressed?
const shiftKey = e.shiftKey || keyCode === 16;
// Get the pressed character
const s = String.fromCharCode(keyCode);
const capsLockOn =
(s.toUpperCase() === s && s.toLowerCase() !== s && !(shiftKey && isMac)) ||
(s.toUpperCase() !== s && s.toLowerCase() === s && shiftKey);
messageEle.innerHTML = capsLockOn ? 'Caps lock is ON' : '';
messageEle.style.display = capsLockOn ? 'block' : 'none';
});
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться