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

ユーザーが 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');
        }
    }
});

完全なサンプルコード

Web アプリで Caps Lock を検出するための完全なコード例は、GitHub Gist で見つけることができます。

この記事が役に立ったと思われた場合は、ハートを押してください ❤️ と、JavaScript のトリックやヒントをさらにご覧ください!

以上がWeb アプリで Caps Lock を検出する簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。