Javascript numberpad codice chiave parsing

Question

sto cercando di analizzare gli eventi KeyDown dal numberpad con il seguente:

$('#myDiv').keydown(function(e) { 
    val = String.fromCharCode(e.which) 
}); 

Il problema è che la tastiera 0-9 keycodes ritorno di 96-105 che, secondo fromCharCode() sono le lettere minuscole a-i. Come posso ottenere gli eventi keydown del tastierino numerico per risolvere il numero appropriato?

Answer 1

Non lo sai: si utilizza l'evento keypress. L'evento keypress è l'unico evento che ti darà informazioni affidabili sui caratteri digitati. Il codice esistente funzionerà se cambi semplicemente keydown in keypress.

Answer 2

Il valore which passato a keydown non è un codice carattere; è un codice chiave (e i codici variano da browser/sistema operativo a browser/sistema operativo). Puoi mapparlo a un personaggio usando the tables on this page, ma dire che questa roba è un po '... imbarazzante ... sarebbe sottovalutare il caso. :-)

In caso contrario, la soluzione migliore è attendere l'evento keypress, che avrà il codice carattere (se pertinente) anziché un codice chiave.

Esempio: Live copy | Live source

jQuery(function($) { 

    $("#theField") 
    .keydown(function(event) { 
     showKey("keydown", event.which); 
    }) 
    .keypress(function(event) { 
     showKey("keypress", event.which); 
    }) 
    .focus(); 

    function showKey(eventName, which) { 
    display(eventName + 
      ": " + which + " (" + 
      String.fromCharCode(which) + ")"); 
    } 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

Usando questo HTML:

<input type="text" id="theField"> 

Answer 3

C'è un modo per fare questo con keydown, se pressione di un tasto non è praticabile a causa di esigenze di cancellazione dell'evento, ecc utilizzare un'istruzione if() con questo test:

parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58 

O, con eventi jQuery:

parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58 

Questi esempi presuppongono che "evento" è l'evento keydown. keyIdentifier è un numero esadecimale che rappresenta il valore unicode per il carattere correlato. Usando keyIdentifier, i numeri dal tastierino numerico/tastiera E i numeri sopra la tastiera QWERTY avranno tutti gli stessi valori, 48 - 57 (U + 0030 - U + 0039), anche con l'evento keyDown.

I valori Unicode nei browser saranno U + 0030 o U + 002F. Analizza questa stringa per ottenere solo il valore esadecimale, quindi usa parseInt() con una radice di 16 per convertirlo in base-10.

Answer 4

Le risposte qui sono obsolete perché KeyboardEvent.which, KeyboardEvent.keyCode e KeyboardEvent.charCode sono tutte deprecate.

Il modo corretto per le versioni più recenti di Firefox, Chrome, IE/Edge e Safari per ottenere il codice carattere è utilizzare KeyboardEvent.key e dovrebbe funzionare con qualsiasi evento chiave, non solo keypress.

KeyboardEvent.key Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.key));

<input placeholder="Start typing...">

---

Se hai ancora bisogno per ottenere il codice di carattere, è necessario utilizzare la proprietà KeyboardEvent.code.

KeyboardEvent.code Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.code));

<input placeholder="Start typing...">

Answer 5

è possibile utilizzare keydown e rilevare tasti del tastierino numerico. L'ho fatto usando il seguente codice. Sottrai 48 dai tasti del tastierino numerico prima di interpretare il codice

function navigate(e) { 
     var keyCode = e.keyCode || e.which; 
     if (keyCode >= 96 && keyCode <= 105) { 
      // Numpad keys 
      keyCode -= 48; 
     } 
     var txtVal = String.fromCharCode(keyCode);