KeyboardEvent.keyCode kullanımdan kaldırıldı. Pratikte bu ne anlama geliyor?

MDN'yi göre, biz kesinlikle gerektiği değil kullanıyor .keyCodeözelliği. Kullanımdan kaldırıldı:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

W3 okulunda, bu gerçek dikkate alınmaz .keyCodeve yalnızca uyumluluk için sağlandığını ve DOM Olayları Spesifikasyonunun en son sürümünün .keymülkün kullanılmasını önerdiğini söyleyen yalnızca bir yan not vardır .

Sorun şu ki .key, tarayıcılar tarafından desteklenmiyor, öyleyse ne kullanmalıyız? Eksik bir şey mi var?

Paylaştığınız bağlantıda yazıldığı gibi, bunu halletmenin üç yolu var.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

onları düşünmelisiniz, çapraz tarayıcı desteği istiyorsanız bu doğru yoldur.

Böyle bir şey uygularsanız daha kolay olabilir.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Tüm bu ek olarak Keycode , , charCode ve keyIdentifier : kaldırıldığını ve standart dışı özelliklerdir. Chrome 54'ten itibaren kaldırılır ve Opera 41.0 , FF'de normal karakterlerle tuşa basma olayında 0 döndürür.
charCodekeyIdentifier
keyIdentifier
keyCode

Anahtar özellik :

 readonly attribute DOMString key

Basılan tuşa karşılık gelen bir anahtar özellik değerini tutar

Bu yazının yazıldığı tarih itibariyle, keyözellik tüm büyük tarayıcılar tarafından desteklenmektedir: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Şu özelliklere sahip olan Internet Explorer 11 dışında: Standart olmayan anahtar tanımlayıcılar ve AltGraph ile yanlış davranış. Daha fazla bilgi
Bu önemliyse ve / veya geriye dönük uyumluluk ise, aşağıdaki kodda olduğu gibi özellik algılamayı kullanabilirsiniz:

Bildirim o keydeğeri farklıdır keyCodeya whichki özellikleri: Bu anahtarın değil, kod adını içerir. Programınızın karakter kodlarına ihtiyacı varsa, kullanabilirsiniz charCodeAt(). Tek yazdırılabilir karakterler için charCodeAt(), ArrowUp olasılıklar gibi değerleri birden çok karakter içeren anahtarlarla uğraşıyorsanız kullanabilirsiniz : özel anahtarları test ediyorsunuz ve buna göre eylemler yapıyorsunuz. Yani anahtarları değerler bir tablo uygulamayı deneyin ve bunlara karşılık gelen kodları charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... vb, bir göz atın lütfen Anahtar Değerleri ve bunların tekabül kodları

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

İleriye dönük uyumluluğu göz önünde bulundurmak isteyebilirsiniz, yani eski özellikleri kullanılabilir durumdayken kullanın ve yalnızca bırakıldığında yenilerine geçin:

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

Ayrıca bakınız: KeyboardEvent.codemülkiyet belgeleri ve bu cevapta daha fazla ayrıntı .

TLDR: Bunu öneririm gerektiğini yeni kullanmak event.keyve event.codeyerine eski olanları özelliklerini. IE ve Edge bu özellikler için desteğe sahiptir, ancak henüz yeni anahtar adlarını desteklememektedir. Onlar için, standart anahtar / kod adlarını çıkarmalarını sağlayan küçük bir çoklu dolgu vardır:

https://github.com/shvaikalesh/shim-keyboard-event-key

OP ile aynı MDN uyarısının nedenini araştırarak bu soruya geldim. Biraz daha araştırdıktan sonra, sorun keyCodedaha net hale geliyor:

Kullanımla ilgili sorun, keyCodeİngilizce olmayan klavyelerin farklı çıktılar üretebilmesi ve hatta farklı düzenlere sahip klavyelerin bile tutarsız sonuçlar üretebilmesidir. Artı, bir durum vardı

W3C spesifikasyonunu okursanız: https://www.w3.org/TR/uievents/#interface-keyboardevent

Pratikte, keyCode ve charCode, platformlar arasında tutarsızdır ve hatta farklı işletim sistemlerinde veya farklı yerelleştirmeler kullanarak aynı uygulama.

Neyin yanlış olduğunu açıklayan biraz derinliğe iniyor keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

Bu özellikler hiçbir zaman resmi olarak belirtilmedi ve mevcut tarayıcı uygulamaları önemli şekillerde farklılık gösteriyor. Kullanıcı aracısını tespit etmeye ve buna göre hareket etmeye dayanan komut dosyası kitaplıkları da dahil olmak üzere büyük miktardaki eski içerik, bu eski öznitelikleri ve olayları resmileştirmeye yönelik herhangi bir girişimin, düzeltebileceği veya etkinleştirebileceği kadar çok içeriği kırma riski olacağı anlamına gelir. Ek olarak, bu özellikler uluslararası kullanım için uygun değildir ve erişilebilirlik sorunlarına hitap etmez.

Öyleyse, eski keyCode'un neden değiştirildiğini belirledikten sonra, bugün yapmanız gerekenlere bakalım:

1. Tüm modern tarayıcılar yeni özellikleri ( keyve code) destekler.
2. IE ve Edge, spesifikasyonun bazı anahtarlar için farklı adlara sahip eski bir sürümünü destekler. Bunun için bir altlık kullanabilirsiniz: https://github.com/shvaikalesh/shim-keyboard-event-key (veya kendinizinkini yuvarlayın - zaten oldukça küçüktür)
3. Edge bu hatayı en son sürümde düzeltti (muhtemelen Nisan 2018'de piyasaya sürülecek) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. Kullanabileceğiniz olay anahtarlarının listesine bakın: https://www.w3.org/TR/uievents-key/

MDN zaten bir çözüm sağlamıştır:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Örneğin, "Enter" tuşunun tıklanıp tıklanmadığını tespit etmek istiyorsanız:

Onun yerine

event.keyCode === 13

Gibi yap

event.key === 'Enter'