Cara Mudah untuk Mengesan Caps Lock dalam Apl Web Anda

Apabila pengguna memasukkan kata laluan atau maklumat sensitif lain dalam aplikasi web, adalah penting untuk memberikan mereka pengalaman yang terbaik. Satu isu biasa ialah pengaktifan Caps Lock secara tidak sengaja, yang boleh menyebabkan percubaan log masuk gagal dan kekecewaan pengguna. Dalam blog ini, kami akan meneroka cara mudah untuk mengesan Caps Lock menggunakan JavaScript untuk meningkatkan kebolehgunaan dan keselamatan aplikasi anda.

1. Menggunakan keydown dan keyup Events

Satu kaedah mudah untuk mengesan Caps Lock adalah dengan mendengar acara keydown dan keyup. Dengan menyemak keadaan acara.getModifierState('CapsLock'), anda boleh menentukan sama ada Caps Lock aktif.

Ini contohnya:

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. Menyemak acara.yang Nilai

Cara lain untuk mengesan Caps Lock ialah dengan memeriksa nilai acara.yang mana semasa acara menekan kekunci. Kaedah ini melibatkan membandingkan nilai ASCII huruf kecil dan huruf besar.

Contoh:

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. Menggabungkan keydown, keyup, dan keypress Events

Untuk penyelesaian yang lebih mantap, anda boleh menggabungkan acara keydown, keyup dan penekanan kekunci untuk merangkumi semua senario yang mungkin, memastikan pengesanan Caps Lock yang tepat.

Contoh:

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');
        }
    }
});

Kod Contoh Lengkap

Anda boleh mendapatkan kod contoh penuh untuk mengesan Caps Lock dalam apl web anda di sini di GitHub Gist.

Sekiranya anda mendapati artikel ini membantu, sila beri semangat ❤️ dan ikuti saya untuk mendapatkan lebih banyak helah dan petua JavaScript!

Atas ialah kandungan terperinci Cara Mudah untuk Mengesan Caps Lock dalam Apl Web Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!