在 Web 應用程式中偵測大寫鎖定的簡單方法

當使用者在 Web 應用程式中輸入密碼或其他敏感資訊時，為他們提供最佳體驗至關重要。一個常見問題是意外啟動 Caps Lock，這可能會導致登入嘗試失敗和使用者沮喪。在本部落格中，我們將探索使用 JavaScript 檢測 Caps Lock 的簡單方法，以提高應用程式的可用性和安全性。

1. 使用 keydown 和 keyup 事件

偵測 Caps Lock 的簡單方法是監聽 keydown 和 keyup 事件。透過檢查 event.getModifierState('CapsLock') 的狀態，您可以確定 Caps Lock 是否處於活動狀態。

這是一個例子：

document.addEventListener('keydown', function(event) {
    if (event.getModifierState('CapsLock')) {
        console.log('Caps Lock is ON');
        // Show a message to the user
    } else {
        console.log('Caps Lock is OFF');
        // Hide the message
    }
});

2. 檢查event.which值

偵測 Caps Lock 的另一種方法是在按鍵事件期間檢查 event.which 值。此方法涉及比較小寫和大寫字元的 ASCII 值。

範例：

document.addEventListener('keypress', function(event) {
    let charCode = event.which || event.keyCode;
    let character = String.fromCharCode(charCode);

    if (character.toUpperCase() === character && character.toLowerCase() !== character && !event.shiftKey) {
        console.log('Caps Lock is ON');
        // Display warning to the user
    } else {
        console.log('Caps Lock is OFF');
        // Hide the warning
    }
});

3. 組合 keydown、keyup 和 keypress 事件

為了獲得更強大的解決方案，您可以組合 keydown、keyup 和 keypress 事件來覆蓋所有可能的場景，確保準確檢測 Caps Lock。

範例：

let isCapsLockOn = false;

document.addEventListener('keydown', function(event) {
    if (event.getModifierState('CapsLock')) {
        isCapsLockOn = true;
        console.log('Caps Lock is ON');
    } else {
        isCapsLockOn = false;
        console.log('Caps Lock is OFF');
    }
});

document.addEventListener('keypress', function(event) {
    let charCode = event.which || event.keyCode;
    let character = String.fromCharCode(charCode);

    if (character.toUpperCase() === character && character.toLowerCase() !== character && !event.shiftKey) {
        if (!isCapsLockOn) {
            isCapsLockOn = true;
            console.log('Caps Lock is ON');
        }
    }
});

完整的範例程式碼

您可以在 GitHub Gist 上找到用於在 Web 應用程式中偵測 Caps Lock 的完整範例程式碼。

如果您覺得本文有幫助，請給它一顆心❤️，並關注我以獲取更多 JavaScript 技巧和技巧！

以上是在 Web 應用程式中偵測大寫鎖定的簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！