problema keyCode - Impossibile impedire l'immissione del carattere%

Question

Nella mia pagina HTML c'è un campo di testo di input. Voglio inserire solo la chiave numerica e la freccia sinistra/destra sulla tastiera. Ho provato il seguente codice JavaScript ma ho riscontrato un problema.

<input onkeypress="return allowNumberOnly(event)" /> 

function allowNumberOnly(event) { 
    event = event || window.event; 
    var charCode = (event.which) ? event.which : event.keyCode; 

    //keyCode 48-57 represent the number 0-9 
    //keyCode 37,39 represent the Left and Right arrow 
    //keyCode 46 represent the Delete key 
    //keyCode 8 represent the Backspace key 

    return charCode == 37 || charCode == 39 || charCode == 46 || charCode == 8 
       || (charCode >= 48 && charCode <= 57); 
} 

Dopo aver testato questo codice, ho trovato un problema che il keyCode della freccia sinistra e% carattere speciale sono entrambi 37. Quindi non posso impedire all'utente di entrare carattere% frattempo permettendo la freccia sinistra. Non ho idea del perché questo accada. Ho sempre pensato che il codice chiave dovesse essere unico per ogni tasto della tastiera. Ho pensato di usare onkeyup invece di onkeypress. Ma l'onkeyup consentirebbe all'utente di inserire prima il carattere non valido, quindi rimuovere dal testo di input. Questo comportamento non è quello che voglio. Qualsiasi suggerimento sarebbe apprezzato.

Ho eseguito il debug del codice in FireFox e ho trovato la seguente differenza.

1. Se entra%, event.which == 37 e event.keyCode == 0
2. Se entra Freccia sinistra, event.which == 0 e event.keyCode == 37

Il problema sembra essere risolto utilizzando questa differenza. Continuerò a provare in IE e Chrome.

Answer 1

controllo risposta Bryant Williams' a questa domanda:

how can i track arrow keys in Chrome and IE?

Egli suggerisce di controllare se il charCode == 0, o il controllo per il tasto Shift è premuto.

Answer 2

sono arrivato fino a questo a while ago:

var numbersOnly = function(e){ 
    var charCode = (typeof e.which === "number") ? e.which : e.keyCode, 
     chr = String.fromCharCode(charCode); //convert it to a character 

    if(isNaN(parseInt(chr, 10))) e.preventDefault(); 
} 

Usage:

<input type="text" name="phoneNumber" onkeypress="numbersOnly(event);"> 

Fondamentalmente quello che stiamo facendo qui è ottenere il codice chiave utilizzata, la conversione che al suo codice char equivalente, e quindi testare il codice char al posto del codice chiave. Trovo che questo metodo funzioni molto meglio di qualsiasi altro che ho incontrato e funziona molto bene.

JS Bin Example.

Answer 3

Utilizzare l'evento onKeydown. Per% è 53.

controllare questo link per il controllo codice chiave: http://kyokodaniel.com/tech/utils/keycodes.html

http://www.west-wind.com/WestwindWebToolkit/samples/Ajax/html5andCss3/keycodechecker.aspx

Answer 4

Questo collegamento ha più informazioni sugli eventi di tastiera

http://unixpapa.com/js/key.html

Inoltre ho fatto la versione jQuery

$('input').keypress(function(e){ 

    var code = e.which || e.keyCode ; 

    if (!(e.shiftKey == false && 
      (
       code == 46 || 
       code == 8 || 
       code == 37 || 
       code == 39 || 
       (code >= 48 && code <= 57) 
      ) 
     ) 
    ){ 

     e.preventDefault();     
    } 

}); 

controllare su http://jsfiddle.net/UGpUJ/