Comment décoder les caractères pressés depuis le gestionnaire d’événement keydown () de jQuery

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

Pour la saisie de caractères, il est recommandé d’utiliser keypress() , qui signalera le code ASCII réel du caractère pressé. Il prend automatiquement en charge la casse des lettres et ignore les presses sans caractère. Dans les deux cas, vous pouvez utiliser fromCharCode () pour convertir en chaîne. Par exemple

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

Rappelez-vous juste que pour keydown() et keyup() , vous devrez suivre le cas en utilisant l’état e.shiftKey .

L’événement keyPress est ce dont vous avez besoin pour savoir quel caractère a été saisi. ( Voir la solution de contournement ci-dessous pour l’événement keydown ).

keyup et keyup fournissent un code indiquant quelle touche est enfoncée, tandis que la keypress indique quel caractère a été saisi.

En utilisant jQuery e.which vous pouvez obtenir le code clé et en utilisant Ssortingng.fromCharCode, vous pouvez obtenir le caractère spécifique qui a été appuyé (y compris shiftKey ).

DEMO: http://jsfiddle.net/9TyzP/3

Code:

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

Remarque J’ai dit que jQuery e.which car différents navigateurs utilisent des propriétés différentes pour stocker ces informations. jQuery normalise la propriété .which afin que vous puissiez l’utiliser de manière fiable pour récupérer le code de la clé.

Solution de contournement pour le keydown

Cependant, vous pouvez écrire une solution de contournement simple pour que le caractère pressé fonctionne lors de la saisie des clés. La solution consiste à créer un object avec la clé comme code-clé sans la touche Maj et la valeur avec la touche Maj.

Note: Comme @Sajjan Sarkar l’a fait remarquer, il existe des différences dans la valeur du code e.which renvoyée par un navigateur différent. Lire plus ici

Mise à jour du code DEMO pour normaliser la valeur keyCode du navigateur. Testé et vérifié dans IE 8, FF et Chrome.

Code complet ci-dessous et mis à jour DEMO: 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)); }); }); 

En savoir plus sur les événements clavier -

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

keydown Se déclenche lorsque l'utilisateur appuie sur une touche. Il se répète pendant que l'utilisateur maintient la touche enfoncée.

keypress Se déclenche lorsqu'un caractère réel est inséré, par exemple dans un texte. Il se répète pendant que l'utilisateur maintient la touche enfoncée.

keyup Se déclenche lorsque l'utilisateur libère une clé, après que l'action par défaut de cette clé a été effectuée.

Lorsqu'une touche est enfoncée pour la première fois, l'événement keydown est envoyé. Si la touche n'est pas une touche de modification, l'événement de keypress est envoyé. Lorsque l'utilisateur libère la clé, l'événement keyup est envoyé.

Lorsqu'une touche est enfoncée et maintenue enfoncée, elle se répète automatiquement. Cela se traduit par une séquence d'événements similaire à celle qui suit:

 keydown keypress keydown keypress <> keyup 

DEMO: http://jsfiddle.net/9TyzP/1/

keyup, keydown vs keypress

Les événements keydown et keyup représentent les touches pressées ou relâchées, tandis que l'événement keypress représente un caractère saisi.

DEMO: http://jsfiddle.net/9TyzP/

Les 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

Je fais ça. Il ignorera simplement la pression sur la touche si la valeur n’est pas un nombre. Semble travailler sans aucun problème …

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

La réponse de Selvakumar Arumugam fonctionne comme un charme… jusqu’à ce que je teste le pavé numérique. Donc, 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/

J’ai créé et utilisé la classe javascript ci-dessus pour convertir les caractères gr en en. Il peut être utilisé pour plus de langues. Il utilise JQuery pour modifier la valeur pressée par l’utilisateur.

 var CharMapper = function (selector) { this.getLanguageMapper = function (languageSource, languageTarget) { // Check if the map is already defined. if (typeof langugageCharMap === "undefined") { langugageCharMap = {}; } if (typeof langugageCharMap[languageSource] === "undefined") { langugageCharMap[languageSource] = {}; } // Initialize or get the language mapper. if (typeof langugageCharMap[languageSource][languageTarget] === "undefined") { switch (languageSource) { case "GR": switch (languageTarget) { case "EN": langugageCharMap[languageSource][languageTarget] = { "α": "a", "ά": "a", "β": "b", "γ": "g", "δ": "d", "ε": "e", "έ": "e", "ζ": "z", "η": "h", "ή": "h", "θ": "th", "ι": "i", "ί": "i", "ϊ": "i", "ΐ": "i", "κ": "k", "λ": "l", "μ": "m", "ν": "n", "ξ": "ks", "ο": "o", "ό": "o", "π": "p", "ρ": "r", "σ": "s", "ς": "s", "τ": "t", "υ": "y", "ύ": "y", "ϋ": "y", "ΰ": "y", "φ": "f", "χ": "x", "ψ": "ps", "ω": "o", "ώ": "o", "Α": "A", "Ά": "A", "Β": "B", "Γ": "G", "Δ": "D", "Ε": "E", "Έ": "E", "Ζ": "Z", "Η": "H", "Ή": "H", "Θ": "TH", "Ι": "I", "Ί": "I", "Ϊ": "I", "Κ": "K", "Λ": "L", "Μ": "M", "Ν": "N", "Ξ": "KS", "Ο": "O", "Ό": "O", "Π": "P", "Ρ": "R", "Σ": "S", "Τ": "T", "Υ": "Y", "Ύ": "Y", "Ϋ": "Y", "Φ": "F", "Χ": "X", "Ψ": "PS", "Ω": "O", "Ώ": "O" }; break; case "GR": default: throw "Language(" + languageTarget + ") is not supported as target for Language(" + languageSource + ")."; } break; case "EN": default: throw "Language(" + languageSource + ") is not supported as source."; } } return langugageCharMap[languageSource][languageTarget]; }; // Check the existance of the atsortingbute. var items = $(selector).find("*[data-mapkey]"); if (items.length === 0) { return; } // For each item. for (var i = 0; i < items.length; i++) { var item = items[i]; // Get the source and target language. var languages = $(item).attr("data-mapkey"); var languageSource = languages.split("_")[0]; var languageTarget = languages.split("_")[1]; // Add the event listener. var self = this; $(item).keypress(function (event) { event.stopPropagation(); // Get the mapper to use. var mapper = self.getLanguageMapper(languageSource, languageTarget); // Get the key pressed. var keyPressed = String.fromCharCode(event.which); // Get the key to set. In case it doesn't exist in the mapper, get the key pressed. var keyToSet = mapper[keyPressed] || keyPressed; // Set the key to the dom. this.value = this.value + keyToSet; // Do not propagate. return false; }); } }; 

Exemple,