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

La 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 String.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 la .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 dans e.which keycode valeur renvoyée par navigateur différent. en savoir plus

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é, la keydown événement est envoyé. Si la clé n'est pas une touche de modification, le keypress événement est envoyé. Lorsque l'utilisateur relâche la touche, le 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

Selvakumar Arumugam réponse fonctionne comme un charme pour moi...jusqu'à ce que j'essai de pavé numérique. Si une mise à jour mineure ici:

 $(document).on('keydown', function(e) {
var c = e.which;
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)) {
c = shiftUps[c];
} else if (96 <= c && c <= 105) {
c = String.fromCharCode(c - 48);
}else {
c = String.fromCharCode(c);
}
$kd.val(c);
})

http://jsfiddle.net/S2dyB/78/