當使用者在 Web 應用程式中輸入密碼或其他敏感資訊時，為他們提供最佳體驗至關重要。一個常見問題是意外啟動 Caps Lock，這可能會導致登入嘗試失敗和使用者沮喪。在本部落格中，我們將探索使用 JavaScript 檢測 Caps Lock 的簡單方法，以提高應用程式的可用性和安全性。
偵測 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
}
});
偵測 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
}
});
為了獲得更強大的解決方案，您可以組合 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中文網其他相關文章！
