Web アプリで Caps Lock を検出する簡単な方法-jsチュートリアル-php.cn

Web アプリで Caps Lock を検出する簡単な方法

WBOY

リリース： 2024-08-17 19:01:32

オリジナル

511 人が閲覧しました

Simple Ways to Detect Caps Lock in Your Web App

ユーザーが Web アプリケーションにパスワードやその他の機密情報を入力する場合、可能な限り最高のエクスペリエンスを提供することが重要です。よくある問題の 1 つは、Caps Lock を誤って有効にしてしまうことで、ログイン試行の失敗やユーザーのイライラにつながる可能性があります。このブログでは、アプリケーションの使いやすさとセキュリティを向上させるために、JavaScript を使用して Caps Lock を検出する簡単な方法を検討します。

1. keydown イベントと keyup イベントの使用

Caps Lock を検出する簡単な方法の 1 つは、キーダウンイベントとキーアップイベントをリッスンすることです。 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.イベントの確認値

Caps Lock を検出するもう 1 つの方法は、キー押下イベント中にevent.that の値を調べることです。この方法では、小文字と大文字の 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. キーダウン、キーアップ、キー押下イベントの結合

より堅牢なソリューションとして、キーダウン、キーアップ、およびキー押下イベントを組み合わせて、考えられるすべてのシナリオをカバーし、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');
        }
    }
});

ログイン後にコピー