5 Domanda: Analisi del keycode Javascript

domanda creata a Sun, Feb 19, 2012 12:00 AM

Sto tentando di analizzare gli eventi keydown dal tastierino numerico con il seguente:

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

Il problema è che la tastiera 0-9 restituisce codici chiave 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?

    
11
5 risposte                              5                         

Non lo fai: usi l'evento keypress. L'evento keypress è l'unico evento che ti darà informazioni affidabili sui caratteri digitati. Il tuo codice esistente funzionerà se cambi semplicemente da keydown a keypress.

    
21
2012-02-19 15: 24: 38Z
  1. Supponiamo che entrambi desideriamo caratteri reali dalla tastiera, e vogliamo anche catturare e fermare il tasto Invio, per evitare che un modulo venga inviato? L'interruzione della pressione di un tasto sembra ancora inviare.
    2012-08-30 20: 49: 07Z
  2. Non posso esprimere quanto sono grato per questa risposta. Questa è stata la mia salvezza cercando di cogliere tutti i diversi casi possibili con shift, alt, tastierino numerico e tastiere mobili. keypress lo rende facile come torta!
    2013-05-29 15: 45: 17Z

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 utilizzando le tabelle in questa pagina , ma per dire che questa roba è un po '... imbarazzante ... sarebbe sottovalutare il caso. : -)

Altrimenti, la soluzione migliore è attendere l'evento keypress, che avrà il codice carattere (se pertinente) piuttosto che un codice chiave.

Esempio: Copia live | Fonte live

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

Utilizzo di questo HTML:

 
<input type="text" id="theField">
    
9
2012-02-19 15: 29: 19Z

C'è un modo per farlo con il keydown, se la pressione di un tasto non è praticabile a causa delle esigenze di cancellazione degli eventi, ecc. Usa una dichiarazione if () con questo test:

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

OR, 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 /tastierino 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 assomiglieranno a 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.

    
1
2014-02-07 02: 15: 21Z

Le risposte qui sono ormai superate perché KeyboardEvent.which , KeyboardEvent.keyCode e KeyboardEvent.charCode sono tutti deprecati.

Il modo corretto per le ultime versioni di Firefox, Chrome, IE /Edge e Safari per ottenere la chiave del personaggio è usare KeyboardEvent.key e dovrebbe funzionare con qualsiasi evento chiave, non solo keypress.

Compatibilità del browser KeyboardEvent.key

 
document.
  querySelector('input').
  addEventListener('keydown', event => console.log(event.key));
<input placeholder="Start typing...">

Se è ancora necessario ottenere il codice carattere, è necessario utilizzare KeyboardEvent.code proprietà.

Compatibilità del browser KeyboardEvent.code

 
document.
  querySelector('input').
  addEventListener('keydown', event => console.log(event.code));
<input placeholder="Start typing...">
    
1
2017-05-18 19: 14: 49Z

puoi usare il keydown e rilevare i tasti del tastierino numerico. L'ho fatto usando il seguente codice. Sottrai 48 dai tasti del tastierino numerico prima di interpretare il tasto

 
function navigate(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode >= 96 && keyCode <= 105) {
            // Numpad keys
            keyCode -= 48;
        }  
        var txtVal = String.fromCharCode(keyCode);
    
0
2017-03-21 02: 09: 14Z
fonte collocata Qui