Hepimizin başına gelmiştir: şifre girerken Caps Lock tuşunun açık olduğunu fark etmez ve bir türlü doğru şifreyi giremeyiz. Normal metin alanlarında yazarken büyük harfleri görürüz ama şifre alanları karakterleri gizlediği için bu fark edilmez. İşte bu yüzden geliştiriciler olarak kullanıcıyı Caps Lock'un açık olduğu konusunda uyarmak büyük bir kolaylık sağlar. Neyse ki modern JavaScript bize bunu yapmak için basit bir yol sunuyor: KeyboardEvent arayüzünün getModifierState() metodu.
getModifierState() metodu, klavye olayı sırasında belirli bir değiştirici tuşun (modifier key) durumunu sorgulamak için kullanılır. 'CapsLock' parametresini geçirerek Caps Lock tuşunun açık olup olmadığını boolean olarak alabiliriz. Örneğin bir şifre giriş kutusuna keyup olayı dinleyicisi ekleyip her tuşa basıldığında Caps Lock durumunu kontrol edebiliriz. Eğer açıksa bir uyarı mesajı göstererek kullanıcının dikkatini çekebiliriz.
Peki bu nasıl kodlanır? Öncelikle şifre alanını seçip bir keyup olayı ekliyoruz. Olay nesnesi üzerinden getModifierState('CapsLock') çağrısı yapıyoruz. Dönen değer true ise Caps Lock açık demektir. Bu durumda bir uyarı metni gösteren bir element oluşturabilir veya mevcut bir uyarıyı görünür hale getirebiliriz. İşte basit bir örnek:
document.querySelector('input[type=password]').addEventListener('keyup', function(keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState('CapsLock'); if (capsLockOn) { showCapsLockWarning(); } else { hideCapsLockWarning(); } }); Bu kod sayesinde kullanıcı Caps Lock açıkken her tuşa bastığında uyarı gösterilir. Ancak bu yöntemin sadece keyup olayında çalıştığını unutmayın. keydown olayı da benzer şekilde kullanılabilir, ancak keyup daha güvenilirdir çünkü tuş bırakıldığında durum netleşir.
getModifierState yalnızca Caps Lock için değil, birçok değiştirici tuş için de kullanılabilir. W3C belgelerine göre şu parametreler desteklenir: Alt, Shift, Control, Meta, AltGraph, CapsLock, Fn, FnLock, Hyper, NumLock, ScrollLock, Super, Symbol, SymbolLock. Bu sayede Num Lock veya Scroll Lock gibi tuşların durumunu da kontrol edebilirsiniz. Özellikle oyun veya klavye kısayolu yoğun uygulamalarda işe yarayabilir.
Bu yöntemi kullanırken dikkat edilmesi gereken bir nokta: getModifierState() tüm tarayıcılarda tam desteklenmeyebilir. Özellikle eski tarayıcı sürümlerinde çalışmayabilir. Bu nedenle bir fallback mekanizması düşünmek iyi olabilir. Ayrıca uyarıyı sadece şifre alanlarında değil, büyük harf girilmesinin sorun yaratacağı diğer alanlarda da kullanabilirsiniz.
Kullanıcı deneyimini iyileştirmek için Caps Lock uyarısını görsel olarak da destekleyebilirsiniz. Örneğin, uyarıyı bir araç ipucu (tooltip) veya kırmızı renkli bir metin olarak gösterebilirsiniz. Ayrıca Caps Lock kapatıldığında uyarıyı otomatik olarak gizlemek de önemli. Bu şekilde kullanıcı hatasını hızla düzeltebilir.
Önemli Gelişmeler
Sonuç olarak, JavaScript'in getModifierState() metodu ile Caps Lock tespiti yapmak oldukça kolay ve etkilidir. Bu küçük dokunuş, özellikle şifre girişlerinde kullanıcıların karşılaştığı can sıkıcı sorunu ortadan kaldırır. Geliştiriciler olarak bu tür ayrıntılara dikkat etmek, uygulamamızın kalitesini ve kullanıcı memnuniyetini artıracaktır.
Kaynak: davidwalsh.name
