keyCode-Problem - Die Eingabe des% -Zeichens kann nicht verhindert werden

Question

In meiner HTML-Seite gibt es ein Eingabetextfeld. Ich möchte nur die Zifferntaste und den linken/rechten Pfeil auf der Tastatur eingeben. Ich habe das folgende JavaScript versucht, aber ein Problem gefunden.

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

Nach diesem Code zu testen, fand ich ein Problem, dass der keyCode von Pfeil links und speziellen Zeichen% ist beide 37. So kann ich nicht vom Benutzer Charakter und lassen Sie den linken Pfeil mittlerweile Eingabe% verhindern. Ich habe keine Ahnung, warum das passieren würde. Ich dachte immer, dass keyCode für jede Taste auf der Tastatur eindeutig sein sollte. Ich dachte an onkeyup statt onkeypress. Mit der Onkeyup-Funktion kann der Benutzer jedoch zuerst das ungültige Zeichen eingeben und anschließend den eingegebenen Text entfernen. Dieses Verhalten ist nicht was ich will. Jeder Vorschlag wäre willkommen.

Ich debuggte den Code in FireFox und fand den folgenden Unterschied.

1. Wenn% eingeben, event.which == 37 und event.keyCode == 0
2. Wenn eingeben Pfeil nach links, event.which == 0 und event.keyCode == 37

Das Problem scheint durch die Verwendung dieses Unterschieds gelöst zu werden. Ich werde weiterhin in IE und Chrome versuchen.

Answer 1

überprüfen Antwort auf diese Frage Bryant Williams:

how can i track arrow keys in Chrome and IE?

Er schlägt vor, zu überprüfen, ob die charCode == 0 oder für die Shift-Taste gedrückt wird, überprüft.

Answer 2

ich kam mit dieser 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(); 
} 

Verbrauch:

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

Im Grunde, was wir hier tun wird, um den Schlüsselcode zu gewöhnen, dass seine char Code Äquivalent umwandelt und Testen Sie dann den Zeichencode anstelle des Schlüsselcodes. Ich finde, dass diese Methode viel besser funktioniert als jede andere, die ich kenne und sie funktioniert ziemlich gut.

JS Bin Example.

Answer 3

Verwenden Sie onKeydown-Ereignis. Für% ist es 53.

prüfen diese Links für den Schlüsselcode Überprüfung: http://kyokodaniel.com/tech/utils/keycodes.html

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

Answer 4

Dieser Link weitere Informationen über Tastaturereignisse hat

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

Auch habe ich jQuery Version

$('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();     
    } 

}); 

überprüfen Sie es auf http://jsfiddle.net/UGpUJ/