Comment décoder le caractère pressé à partir du gestionnaire d'événements de keydown () de jQuery

Question

Je dois déterminer quel caractère a été saisi dans un champ de texte à partir du gestionnaire appelé par la fonction keydown de jQuery. key.which ne me donne que le code clé, mais je dois déterminer quel caractère ASCII key représente. Comment puis-je faire cela?

Answer 1

L' keyPress événement est ce que vous avez besoin pour obtenir le caractère qui a été entré. (Voir ci-dessous solution de contournement pour l'événement keydown).

keydown et keyup fournir un code indiquant quelle touche est enfoncée, tout en keypress indique que le caractère qui a été entré.

À l'aide de jQuery e.which vous pouvez obtenir le code de la clé et à l'aide de la Chaîne.fromCharCode vous pouvez obtenir le caractère spécifique qui a été enfoncé (y compris shiftKey).

DÉMO: http://jsfiddle.net/9TyzP/3

Code:

element.on ('keypress', function (e) {
    console.log(String.fromCharCode(e.which));
})

Remarque je l'ai dit jQuery e.which parce que les différents navigateurs utilisent des propriétés différentes pour stocker cette information. jQuery normalise l' .which de la propriété de sorte que vous pouvez utiliser fiable pour récupérer le code de la clé.

Solution de contournement pour keydown

Cependant, vous pouvez écrire une solution simple pour obtenir le pressé de caractères de travail sur keydown.. La solution de contournement consiste à créer un objet avec la clé comme le charCode sans changement de pression de touche et la valeur avec la touche shift.

Remarque: Comme @Sajjan Sarkar a souligné il y a quelques différences en e.which mot de code valeur renvoyée par navigateur différent. Lire la suite ici

Mis à jour le code de DÉMONSTRATION afin de normaliser la croix-navigateur de code de touche de la valeur. Testé et vérifié dans IE 8, FF et Chrome.

Code complet ci-dessous et mise à jour de la DÉMO: http://jsfiddle.net/S2dyB/17/

$(function() {

    var _to_ascii = {
        '188': '44',
        '109': '45',
        '190': '46',
        '191': '47',
        '192': '96',
        '220': '92',
        '222': '39',
        '221': '93',
        '219': '91',
        '173': '45',
        '187': '61', //IE Key codes
        '186': '59', //IE Key codes
        '189': '45'  //IE Key codes
    }

    var shiftUps = {
        "96": "~",
        "49": "!",
        "50": "@",
        "51": "#",
        "52": "$",
        "53": "%",
        "54": "^",
        "55": "&",
        "56": "*",
        "57": "(",
        "48": ")",
        "45": "_",
        "61": "+",
        "91": "{",
        "93": "}",
        "92": "|",
        "59": ":",
        "39": "\"",
        "44": "<",
        "46": ">",
        "47": "?"
    };

    $(element).on('keydown', function(e) {
        var c = e.which;

        //normalize keyCode 
        if (_to_ascii.hasOwnProperty(c)) {
            c = _to_ascii[c];
        }

        if (!e.shiftKey && (c >= 65 && c <= 90)) {
            c = String.fromCharCode(c + 32);
        } else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
            //get shifted keyCode value
            c = shiftUps[c];
        } else {
            c = String.fromCharCode(c);
        }

        //$(element).val(c);
    }).on('keypress', function(e) {
        //$(element).val(String.fromCharCode(e.which));
    });    
});

Plus sur les événements de clavier --

Le keydown, keypress et keyup événements se déclenche lorsque l'utilisateur appuie sur une touche.

keydown se Déclenche lorsque l'utilisateur appuie sur une touche. Elle se répète tant que l'utilisateur appuie sur la touche.

keypress se Déclenche lorsqu'un caractère est inséré, par exemple, une saisie de texte. Elle se répète tant que l'utilisateur appuie sur la touche.

keyup se Déclenche lorsque l'utilisateur relâche une touche, après l'action par défaut de cette clé a été effectuée.

Lorsqu'une clé est d'abord déprimé, l' keydown événement est envoyé. Si la clé n'est pas une touche de modification, l' keypress événement est envoyé. Lorsque l'utilisateur relâche la touche, l' keyup événement est envoyé.

Lorsqu'une touche est enfoncée et maintenue enfoncée, elle commence à s'auto-répétition. Il en résulte une séquence d'événements semblables aux suivants d'être envoyés:

keydown
keypress
keydown
keypress
<<repeating until the user releases the key>>
keyup

DÉMO: http://jsfiddle.net/9TyzP/1/

keyup, keydown vs keypress

Le keydown et keyup événements représentent des clés enfoncé ou relâché, tandis que l'événement keypress représente un caractère tapé.

DÉMO: http://jsfiddle.net/9TyzP/

Références:

1. https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent

2. http://www.quirksmode.org/dom/events/keys.html

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

Answer 2

Pour la saisie de caractères, il est suggéré d'utiliser keypress() , qui indiquera le code ASCII réel du caractère saisi. Il prend automatiquement en charge la casse des lettres et ignore les pressions autres que des caractères. Dans les deux cas, vous pouvez utiliser fromCharCode () pour convertir une représentation sous forme de chaîne. Par exemple

 var c = String.fromCharCode(e.which) // or e.keyCode
 

Rappelez-vous simplement que pour keydown() et keyup() , vous devez suivre le cas en utilisant l'état e.shiftKey .

Answer 3

Je fais ça. Il faudra simplement ignorer la pression de touche si la valeur n'est pas un nombre. Semble travailler sans aucun problème ...

     $("input").on("keypress", function(e) {
        if(!jQuery.isNumeric(String.fromCharCode(e.which)))
            return false;
    });