如何使用 JavaScript 檢測大寫鎖定是否開啟

要檢測 JavaScript 中是否打開了大寫鎖定，您可以使用 getModifierState() KeyboardEvent的方法 事件對象。

KeyboardEvent 可用於檢測多個鍵的狀態，包括現代瀏覽器和 IE9+ 上的大寫鎖定。

const isCapsLock = event.getModifierState(modifier);

getModifierState() 方法返回 true 如果指定的修飾鍵被按下或激活。

讓我們您獲得以下密碼字段，並希望在激活大寫鎖定時提醒用戶：

<form>
    <input type="password" name="password" id="password" placeholder="Enter password">
    <span id="hint"></span>
</form>

以下示例演示瞭如何在用戶輸入密碼時打開大寫鎖定時向用戶顯示警告消息：

const password = document.querySelector('#password');
const hint = document.querySelector('#hint');

// Lisen for `keyup` event
password.addEventListener('keyup', (e) => {
    if (e.getModifierState('CapsLock')) {
        hint.textContent = 'Caps lock is on';
    } else {
        hint.textContent = '';
    }
});

在上面的例子中，我們監聽 keyup 密碼字段的事件，並在激活大寫鎖定時顯示提示。