problème keyCode - Impossible d'empêcher la saisie du caractère%

Question

Dans ma page HTML, il y a un champ de saisie. Je veux seulement la touche numérique et la flèche gauche/droite sur le clavier peut être entré. J'ai essayé le JavaScript suivant, mais j'ai rencontré un problème.

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

Après avoir testé ce code, j'ai trouvé un problème que le code d'activation de la flèche gauche et caractère spécial% sont à la fois 37. Je ne peux pas empêcher l'utilisateur d'entrer le caractère% permettant quant à lui la flèche gauche. Je n'ai aucune idée de pourquoi cela arriverait. J'ai toujours pensé que le keyCode devrait être unique pour chaque touche du clavier. J'ai pensé utiliser onkeyup au lieu de onkeypress. Mais l'onkeyup permettrait à l'utilisateur d'entrer le caractère invalide en premier, puis de le retirer du texte d'entrée. Ce comportement n'est pas ce que je veux. Toute suggestion serait appréciée. J'ai débogué le code dans FireFox et trouvé la différence suivante.

1. Si entrez%, event.which == 37 et event.keyCode == 0
2. Si entrer Flèche gauche, event.which == 0 et event.keyCode == 37

Le problème semble être résolu en utilisant cette différence. Je vais continuer à essayer dans IE et Chrome.

Answer 1

Vérifiez la réponse de Bryant Williams à cette question:

how can i track arrow keys in Chrome and IE?

Il suggère également de vérifier si le charCode == 0, ou la vérification de la touche Maj enfoncée enfoncée.

Answer 2

je suis venu avec cette 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(); 
} 

Utilisation:

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

En fait ce que nous faisons ici est d'obtenir le code clé utilisé, la conversion que son code char équivalent, et puis testez le code char au lieu du code clé. Je trouve que cette méthode fonctionne beaucoup mieux que toutes les autres que j'ai rencontrées et ça marche plutôt bien.

JS Bin Example.

Answer 3

Utilisez l'événement onKeydown. Pour% il est 53.

Vérifiez ce lien pour vérifier keycode: http://kyokodaniel.com/tech/utils/keycodes.html

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

Answer 4

Ce lien a plus d'informations sur les événements clavier

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

J'ai aussi fait la version 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();     
    } 

}); 

vérifier sur http://jsfiddle.net/UGpUJ/