web-dev-qa-db-fra.com

Déterminer si JavaScript e.keyCode est un caractère imprimable (sans contrôle)

Je voudrais juste connaître la ou les plages de JavaScript keyCodes qui correspondent à des caractères typables; ou alternativement, la gamme de caractères (de contrôle) non typables comme le retour arrière, l'échappement, la commande, le décalage, etc. afin que je puisse les ignorer.

La raison pour laquelle je demande d'appeler String.fromCharCode() entraîne des caractères impairs pour les touches de contrôle. Par exemple, j'obtiens "[" pour la commande gauche, "%" pour la flèche gauche. Bizarrerie comme ça.

javascriptkeycode
49
devios1

Keydown vous donnera le keyCode de la touche enfoncée, sans aucune modification.

$("#keypresser").keydown(function(e){
    var keycode = e.keyCode;

    var valid = 
        (keycode > 47 && keycode < 58)   || // number keys
        keycode == 32 || keycode == 13   || // spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || // letter keys
        (keycode > 95 && keycode < 112)  || // numpad keys
        (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
        (keycode > 218 && keycode < 223);   // [\]' (in order)

    return valid;
});

Seules les touches numériques, les lettres et la barre d'espace auront des codes clés en corrélation avec String.fromCharCode car il utilise des valeurs Unicode.

Keypress sera la représentation charCode du texte saisi. Notez que cet événement ne se déclenchera pas si aucun texte n'est "imprimé" à la suite de la pression de touche.

$("#keypresser").keypress(function(e){
    var charcode = e.charCode;
    var char = String.fromCharCode(charcode);
    console.log(char);
});

http://jsfiddle.net/LZs2D/1/ Démontrera comment cela fonctionne.

KeyUp se comporte de manière similaire à KeyDown.

82
Shmiddty

Juste pour le fond, l'événement "keypress" vous donnera une propriété charCode chaque fois que vous appuyez sur une touche de caractère.

Editor.addEventListener('keypress', function(event){
    if (event.charCode) {
        //// character key
        console.log( String.fromCharCode(event.charCode) ); /// convert charCode to intended character.
    } else {
        //// control key
    }

Cependant, l'événement "keypress" ne capture pas chaque frappe - plusieurs touches se déclenchent avant l'événement "keypress".

En revanche, l'événement "keydown" capturera chaque frappe, mais il n'a pas de propriété charCode . Alors, comment savoir s'il s'agit d'une clé de caractère? Vérifier à chaque coup de touche si le keyCode se trouve dans les limites inférieure et supérieure de plusieurs plages n'est pas efficace de manière optimale. Je soupçonne qu'il existe également des problèmes pour les caractères en dehors de la plage ASCII.

Mon approche consiste à vérifier la longueur de la propriété "clé" de l'événement. La propriété "key" est une alternative à "keyCode" pour déterminer quelle touche a été enfoncée. Pour les touches contrôle, la propriété "key" est descriptive (par exemple "rightArrow", "F12", "return", etc.). Pour les touches caractère, la propriété "clé" d'une clé de caractère est juste le caractère (par exemple "a", "A", "~", "\", etc. .). Par conséquent, pour chaque clé de caractère, la longueur de la propriété "key" aura une longueur de 1; tandis que les caractères de contrôle auront une longueur supérieure à 1.

Editor.addEventListener('keydown', function(event){
    if (event.key.length == 1){ 
        //// character key
    } else {
        //// control key
    }
})
15
iamio

Cet article contient une liste des keyCodes dans Javascript:

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

4
Dave Zych

Vous pouvez également utiliser RegEx pour cela:

$(".input").keyup(function (event) {
    if (event.key.match(/^[\d\w]$/i)) {
      // put function to trigger when a digit or a Word character is pressed here
    }

l'indicateur i rend l'expression insensible à la casse.

1
denkquer