Chrome'un son birkaç sürümünde keydown, keypress ve keyup etkinlik işleyicilere iletilen parametre olarak kullanılan KeyboardEvent öğelerine iki ekleme yapıldı. Hem code özelliği (Chrome 48'de eklenen) hem de key özelliği (Chrome 51'de eklenir), eski özellikleri kullanırken zor olacak bilgilere ulaşmaları için geliştiricilere basit bir yol sunar.
Kod özelliği
İlk sırada code özelliği var. Geçerli klavye düzeni (örneğin, QWERTY - Dvorak), yerel ayar (örneğin, İngilizce veya Fransızca) ya da değiştirici tuşlar dikkate alınmadan KeyboardEvent oluşturmak için basılan tuşu temsil eden bir dize olarak ayarlanır.
Bu, hangi karaktere karşılık geldiği yerine hangi fiziksel tuşa basıldığına önem verdiğinizde yararlı olur. Örneğin, oyun yazıyorsanız oyuncuyu farklı yönlerde hareket ettirmek için belirli bir tuş grubu kullanmak isteyebilirsiniz ve bu eşleme ideal olarak klavye düzeninden bağımsız olmalıdır.
Anahtar özelliği
Şimdi de yeni key özelliğini inceleyelim. Dize de ayarlanır ancak code basılan fiziksel tuşla ilgili bilgileri döndürürken key, geçerli klavye düzeni, yerel ayar ve değiştirici tuşlar dikkate alınarak bu tuş tarafından oluşturulan karakteri içerir.
Kullanıcı bir metin girişi girmiş gibi ekranda hangi karakterin gösterileceğini öğrenmek istediğinizde key özelliğinin değerine bakmanız faydalı olur.
Uygulamada bu ne anlama geliyor?
Somut bir örnek vermek gerekirse, kullanıcınızın QWERTY klavye düzenine sahip bir ABD klavyesi kullandığını varsayalım. Bu klavyede fiziksel Q tuşuna bastığınızda, code özelliği "KeyQ" olarak ayarlanmış KeyboardEvent sonucu elde edilir. Bu, klavye düzeninden ve diğer değiştirici tuşlardan bağımsız olarak geçerlidir. Karşılaştırma yapmak gerekirse, Fransızca (AZERTY) klavyede klavyede "a" harfi yazılı olmasına rağmen bu tuşta code "KeyQ" olur.
Aynı ABD klavyesinde fiziksel Q tuşuna basıldığında, genellikle key öğesi "q" (değiştirici tuş olmadan) veya "Q" (Üst Karakter ya da CapsLock ile) veya "œ" (OS X'te Alt ile) olarak ayarlanmış bir KeyboardEvent oluşturulur. Fransızca AZERTY klavyede, bu tuş bir "a" (veya Üst Karakter ya da CapsLock ile "A") oluşturur. Diğer klavye düzenleri için key değeri "й", "ض", "ㅂ", "た" veya başka bir karakter olabilir.
Önceki oyun örneğimize dönecek olursak, oyununuzun hareket için WASD anahtarlarını kullanmasını istiyorsanız code özelliğini kullanarak "KeyW", "KeyA", "KeyS" ve "KeyD" değerlerini kontrol edebilirsiniz. Bu, tüm klavyelerde ve tüm düzenlerde, hatta "w" ve "z" tuşlarının yerini değiştiren AZERTY klavyelerde bile kullanılabilir.
Sanal klavyeler
Şimdiye kadar fiziksel klavye davranışına odaklandığımızı fark edeceksiniz. Sanal klavye veya alternatif giriş cihazında yazı yazan kullanıcılara ne olacak? Spesifikasyon, code özelliği için resmi rehberlik sunar. Özetlemek gerekirse, standart klavyenin düzenini taklit eden bir sanal klavyenin uygun bir code özelliğinin ayarlanmasıyla sonuçlanması beklenir ancak geleneksel olmayan düzenleri kullanan sanal klavyeler, code özelliğinin hiç ayarlanmamasına neden olabilir.
key özelliği için işler daha basittir. Bu özelliğin, kullanıcının (neredeyse) yazdığı karaktere bağlı olarak bir dize olarak ayarlanmasını beklemeniz gerekir.
Deneyin
Gary Kačmarčík KeyboardEvent ile ilişkili tüm özelliklerin görselleştirilmesi için harika bir demo hazırladı:
Tarayıcılar arası destek
Bu yazı itibarıyla code özelliği desteği Chrome 48+, Opera 35+ ve Firefox 44+ ile sınırlıdır.
key özelliği Firefox 44+, Chrome 51+ ve Opera 38+ ile Internet Explorer 9+ ile Edge 13+ arasında kısmi destek ile desteklenir.