Çoğu kullanıcı, farkında olmadan Caps Lock tuşunu açık bırakabilir. Normal metin alanlarında yazarken bu durum hemen fark edilirken, şifre alanlarında girilen karakterler yıldız veya nokta olarak görüntülendiği için kullanıcı Caps Lock'un açık olduğunu anlamayabilir. Bu da şifrenin yanlış girilmesine ve kullanıcı deneyiminin bozulmasına yol açar. Neyse ki, JavaScript ile bu sorunu tespit edip kullanıcıyı uyarabiliriz.
Caps Lock durumunu algılamak için KeyboardEvent arayüzünün getModifierState() yöntemini kullanabiliriz. Bu yöntem, belirli bir değiştirici tuşun (modifier key) durumunu kontrol etmek için tasarlanmıştır. Örneğin, bir şifre giriş alanına keyup olay dinleyicisi ekleyerek Caps Lock'un açık olup olmadığını sorgulayabiliriz: document.querySelector('input[type=password]').addEventListener('keyup', function(event) { const capsLockOn = event.getModifierState('CapsLock'); if (capsLockOn) { console.log('Caps Lock açık!'); } });
getModifierState yöntemi, yalnızca Caps Lock ile sınırlı değildir. W3C belgelerine göre, bu yöntemle kontrol edilebilecek diğer değiştirici tuşlar da mevcuttur. Bunlar arasında NumLock, ScrollLock, Alt, Shift, Ctrl, Meta (Windows tuşu), Fn, Hyper, Super, Symbol ve bunların kilitli versiyonları (FnLock, SymbolLock) bulunur. Bu sayede klavyedeki çeşitli tuşların durumunu dinamik olarak izleyebiliriz.
Pratikte, Caps Lock uyarısı genellikle şifre alanlarının yanında bir metin veya simge ile gösterilir. Örneğin, uyarı mesajı olarak 'Caps Lock açık!' yazısını kullanabilir veya bir uyarı kutusu gösterebiliriz. Kullanıcı Caps Lock'u kapattığında uyarıyı gizlemek de önemlidir. Bunun için hem keyup hem de keydown olaylarını dinleyebilir veya durum değişikliğinde güncelleme yapabiliriz.
Bu teknik, özellikle güvenlik hassasiyeti olan uygulamalarda (banka, e-posta, sosyal medya girişleri) büyük önem taşır. Kullanıcıların yanlış şifre girme olasılığını azaltarak destek taleplerini ve hayal kırıklığını önler. Ayrıca, erişilebilirlik açısından da faydalıdır; örneğin, görme engelli kullanıcılar için ekran okuyuculara Caps Lock durumu bildirilebilir.
Gelecekte Ne Bekleniyor?
Uygulama sırasında dikkat edilmesi gereken bir nokta, getModifierState yönteminin tüm tarayıcılarda aynı şekilde desteklenmemesidir. Modern tarayıcıların çoğu bu yöntemi desteklerken, eski sürümlerde sorun yaşanabilir. Bu nedenle, bir fallback mekanizması eklemek veya polyfill kullanmak iyi bir uygulamadır. Ayrıca, Caps Lock durumunu kontrol etmek için tuş olayının keyCode veya which özelliklerini kullanmak da alternatif bir yöntemdir, ancak getModifierState daha doğrudan ve güvenilirdir.
Kaynak: davidwalsh.name
