Wie kann ich die ursprüngliche Tastenbelegung eines nummerierten Schlüssels in einem Tastendruckereignis mit shift bekommen?

Question

Ich möchte in der Lage sein, den Wert eines nummerierten Schlüssels auf einem onKeypress-Ereignis zu erhalten, das mit shift durchgeführt wird. Ich versuche eine Web-App zu erstellen, die verschiedene Aktionen mit den Tasten 123 ... 9 und auch shift-123 ... 9 verknüpft. Das Problem ist, dass wenn ich das Tastendruckereignis mit Verschiebung erhalte, ich nur den Verschiebungswert bekommen kann und wenn Verschiebung wahr ist.

z.B. shift-1

shiftKey: true 
key: "!" 

Ich möchte einen Weg finden, um den Wert 1 von "!" zu bekommen. Ich mache mir auch Sorgen um andere Tastaturen, die möglicherweise andere Zeichen als "!" wenn shift-1 gedrückt wird. Wie die AZERTY-Tastatur.
http://mentalfloss.com/article/52483/6-non-qwerty-keyboard-layouts

Wie kann ich den ursprünglichen Wert eines Shift-Tastendruckereignisses erhalten, als ob Shift nicht gedrückt wurde?

Update Antwort auf Kommentar:

@HostListener('document:keypress', ['$event']) 
handleKeyboardEvent(event: KeyboardEvent) { 
    let keyNumber = Number.parseInt(event.key); 
    if (keyNumber !== NaN && keyNumber !== 0) { 
    if (event.shiftKey === false && keyNumber <= this.documents.length) { 
     // use number to access some array 
     this.currentDocument = this.documents[--keyNumber]; 
    } else if (keyNumber <= this.currentDocument.toc.length) { // I'll see if they go past 10.. 
     // PROBLEM HERE trying to get number to also access an array 
     this.routeToFragment(this.currentDocument.toc[--keyNumber].slug); // this is NaN until I can convert "!@#$%..(" 
    } 
    } 
} 

Answer 1

Tastaturereignisse haben die code Eigenschaft als Teil ihres Ereignisobjekt - das wird den Schlüssel zurück, die, ohne auf irgendwelche Zusatztasten ist gedrückt.

Beispiel:

document.addEventListener('keypress', (event) => { 
    console.log({ code: event.code }) 
}) 

/* 
[press shift + 1] => // { code: 'Digit1' } 
[press shift + /] => // { code: 'Slash' } 
*/