codice chiave JavaScript deprecato. Cosa significa in pratica?

Question

Secondo MDN, dovremmo assolutamente non utilizzare la proprietà .keyCode. Si è deprecato:

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

sulle scuole w3, questo fatto è iniziata e c'è solo un lato nota dicendo che .keyCode è previsto solo per compatibilità e che l'ultima versione della specifica DOM Eventi consiglia di utilizzare il .key proprietà invece.

Il problema è che .key non è supportato dai browser, quindi cosa dovremmo usare? C'è qualcosa che mi manca?

Answer 1

avete tre modi per gestire, come è scritto sul link che hai condiviso.

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

li si dovrebbe contemplare, questo è il modo giusto, se si desidera il supporto cross browser.

Potrebbe essere più semplice se si implementa qualcosa di simile.

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); 
 
};

Answer 2

MDN ha già fornito una soluzione:

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); 

Answer 3

fare quello che faccio. Semplicemente non mi interessa. MDN può dire che è deprecato, ma se non forniscono un'alternativa (eccetto keyIdentifier), allora devi usare la versione deprecata.

Answer 4

Oltre che tutti keyCode, which, charCode e keyIdentifier sono obsoleti:
charCode e keyIdentifier sono caratteristiche non standard.
keyIdentifier viene rimosso da Chrome 54 e Opera 41.0
keyCode restituisce 0, sull'evento di pressione tasti con caratteri normali su FF.

The key property:

readonly attribute DOMString key 

contiene un valore di attributo tasto corrispondente al tasto premuto

Al momento di questa scrittura, la proprietà key è supportato da tutti i principali browser come di : Firefox 52, Chrome 55, Safari 10.1, Opera 46. Tranne Internet Explorer 11 che ha: Identificatori di chiavi non standard e comportamento errato con AltG Raph.More info
Se questo è importante e/o la compatibilità a ritroso è, quindi è possibile utilizzare il rilevamento funzione come nel codice seguente:

Si noti che il valore key è diverso da keyCode o which immobili a che: contiene il nome della chiave, non il suo codice. Se il tuo programma richiede i codici dei caratteri, puoi utilizzare charCodeAt(). Per i singoli caratteri stampabili è possibile utilizzare charCodeAt(), se si ha a che fare con chiavi i cui valori contengono più caratteri come ArrowUp è probabile che si stiano verificando chiavi speciali e si eseguano azioni di conseguenza. Quindi provare l'attuazione di una tabella di valori chiavi e la loro corrispondente codici charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27 ... e così via, si prega di dare un'occhiata al Key Values e la loro corresponding codes

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 */ 

Può essere che si desidera prendere in considerazione in avanti compatibilità cioè utilizzare le proprietà legacy mentre sono disponibili, e solo quando è sceso interruttore per quelli nuovi:

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; 
    } 

Vedi anche: la KeyboardEvent.code proprietà docs e alcuni altri dettagli in questo answer.