Chrome'un son birkaç sürümünde, keydown, keypress ve keyup etkinlik işleyicilerine iletilen bir parametre olarak kullanılan KeyboardEvent'lara iki ekleme yapıldı. Hem code özelliği (Chrome 48'de eklendi) hem de key özelliği (Chrome 51'de eklendi), geliştiricilere eski özellikleri kullanarak zor olan bilgileri kolayca alma olanağı sunar.
code özelliği
İlk olarak code özelliğini ele alalım. Bu, geçerli klavye düzenini (ör. QWERTY ve Dvorak), yerel ayarı (ör. İngilizce ve Fransızca) veya herhangi bir değiştirici anahtarı dikkate almadan KeyboardEvent oluşturmak için basılan anahtarı temsil eden bir dize olarak ayarlanır.
Bu, hangi karaktere karşılık geldiğinden ziyade hangi fiziksel tuşa basıldığıyla ilgilendiğinizde kullanışlıdır. Örneğin, bir oyun yazıyorsanız oyuncuyu farklı yönlere hareket ettirmek için belirli bir tuş grubu kullanmak isteyebilirsiniz. Bu eşleme ideal olarak klavye düzeninden bağımsız olmalıdır.
Anahtar özelliği
Ardından yeni key özelliğini görüyoruz. key da bir dize olarak ayarlanır. Ancak code, basılan fiziksel tuşa ilişkin bilgileri döndürürken key, mevcut 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şine yazıyormuş gibi ekranda hangi karakterin gösterileceğini bilmeniz gerektiğinde key özelliğinin değerine bakabilirsiniz.
Peki bu, pratikte 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 klavyedeki fiziksel Q tuşuna basıldığında code özelliği "KeyQ" olarak ayarlanmış bir KeyboardEvent oluşturulur. Bu durum, klavye düzeninden ve diğer değiştirici tuşlardan bağımsız olarak geçerlidir. Karşılaştırma amacıyla, Fransızca (AZERTY) klavyede bu tuşun tuş kapağında "a" harfi basılı olsa bile "KeyQ" code değeri bulunur.
Aynı ABD klavyesindeki fiziksel Q tuşuna basıldığında genellikle key "q" olarak ayarlanmış (değiştirici tuş olmadan) veya "Q" (Üst Karakter veya CapsLock ile) ya da "œ" (OS X'te Alt ile) bir KeyboardEvent oluşturulur. Fransızca AZERTY klavyesinde aynı tuş "a" (veya Üst Karakter veya Büyük/Küçük Harf Kilidi tuşlarıyla "A") oluşturur. Diğer klavye düzenlerinde key değeri "й", "ض", "ㅂ", "た" veya başka bir karakter olabilir.
Daha önceki oyun örneğimize dönecek olursak, oyununuzun hareket için WASD tuşlarını kullanmasını istiyorsanız code özelliğini kullanabilir ve "KeyW", "KeyA", "KeyS" ve "KeyD" değerlerini kontrol edebilirsiniz. Bu yöntem, "w" ve "z" tuşlarının konumunu değiştiren AZERTY klavyeleri de dahil olmak üzere tüm klavyeler ve tüm düzenler için işe yarar.
Sanal klavyeler
Şimdiye kadar fiziksel klavye varsayılarak davranışa odaklandığımızı fark edeceksiniz. Sanal klavye veya alternatif giriş cihazı kullanan kullanıcılar ne olacak? code özelliğiyle ilgili resmi yönergeler spesifikasyonda yer alır. Özetlemek gerekirse, standart bir klavyenin düzenini taklit eden bir sanal klavyenin uygun bir code özelliğinin ayarlanmasına yol açması beklenir ancak geleneksel olmayan düzenler 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 (sanal olarak) hangi karakteri yazdığına bağlı olarak bir dize olarak ayarlanmasını bekleyebilirsiniz.
Deneyin
Gary Kačmarčík, KeyboardEvent ile ilişkili tüm özellikleri görselleştirmek için harika bir demo hazırladı:
Tarayıcılar arası destek
code özelliğinin desteği, bu makalenin yazıldığı tarih itibarıyla Chrome 48 ve sonraki sürümler, Opera 35 ve sonraki sürümler ve Firefox 44 ve sonraki sürümlerle sınırlıdır.
key özelliği, Firefox 44 ve sonraki sürümler, Chrome 51 ve sonraki sürümler ve Opera 38 ve sonraki sürümlerde desteklenir. Internet Explorer 9 ve sonraki sürümler ile Edge 13 ve sonraki sürümlerde ise kısmi destek vardır.