Bagaimana Mengesan Caps Lock dalam JavaScript: Pendekatan Mudah dan Cekap?

Mengesan Caps Lock dengan JavaScript: Pendekatan Mudah dan Cekap

Menentukan sama ada Caps Lock diaktifkan menggunakan JavaScript menimbulkan cabaran yang sama dalam kalangan pembangun. Walaupun pelbagai penyelesaian wujud, ia selalunya melibatkan kaedah yang rumit dan intensif sumber. Nasib baik, terdapat penyelesaian mudah yang menghapuskan keperluan untuk gelung kompleks atau pengendali acara.

Menggunakan KeyboardEvent dan getModifierState

Pelayar moden menyediakan objek KeyboardEvent, yang menawarkan getModifierState fungsi. Fungsi ini mengembalikan status kekunci pengubah suai tertentu, termasuk Caps Lock. Begini cara anda boleh memanfaatkannya:

<code class="javascript">passwordField.addEventListener('keydown', function(event) {
  var caps = event.getModifierState && event.getModifierState('CapsLock');
  console.log(caps); // true when Caps Lock is on
});</code>

Dalam contoh ini, kami melampirkan pendengar acara keydown pada medan input. Apabila kekunci ditekan, objek acara ditangkap dan fungsi getModifierState digunakan untuk mengesahkan keadaan Caps Lock. Jika Caps Lock aktif, ia mengembalikan 'true.' Pendekatan ini adalah intuitif dan cekap sumber, kerana ia bergantung pada fungsi penyemak imbas terbina dalam tanpa memerlukan penyelesaian yang menyusahkan.

Atas ialah kandungan terperinci Bagaimana Mengesan Caps Lock dalam JavaScript: Pendekatan Mudah dan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!