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

Question

J'ai besoin de savoir quel caractère a été tapé dans un champ de texte dans le gestionnaire qui est appelé par la fonction keydown de jQuery. key.which me donne seulement le code clé, mais j'ai besoin de savoir quel caractère ASCII key représente. Comment puis-je faire cela?

Answer 1

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

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

n'oubliez pas que pour keydown() et keyup(), vous devrez garder une trace du cas en utilisant l'état e.shiftKey.

Answer 2

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

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

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

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

code:

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

Remarque je l'ai dit e.which jQuery parce que les 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 clé.

Solution pour keydown

Cependant, vous pouvez écrire une solution simple pour obtenir le caractère pressé de travailler sur keydown .. La solution consiste à créer un objet avec la clé comme charCode sans pression de touche Maj enfoncée et la valeur est avec la touche Maj.

Remarque: Comme @Sajjan Sarkar a souligné qu'il existe des différences dans e.which valeur de code-clé retourné à partir de différents navigateur. Read more here

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

complet Code 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 de clavier -

Le keydown, et keypress le feu des événements keyup 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. Se déclenche quand un caractère réel est inséré dans, par exemple, une entrée de texte. Il se répète pendant que l'utilisateur maintient la touche enfoncée.

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

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

Lorsqu'une touche est enfoncée et maintenue enfoncée, elle commence à se répéter automatiquement. 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 

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

KeyUp, KeyDown vs keypress

Les événements KeyDown et KeyUp représentent les touches pressées ou libéré, tandis que l'événement keypress représente un caractère tapé.

DEMO: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 3

Je fais ceci. Il ignorera simplement la touche si la valeur n'est pas un nombre. semble fonctionner sans aucun problème ...

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

Answer 4

réponse de Selvakumar Arumugam fonctionne comme un charme pour moi ... jusqu'à ce que je test numpad.Ainsi, 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/

Answer 5

Je créé et utiliser le javascript ci-dessus classe pour convertir en gr de caractères. Il est capable d'être utilisé pour plus de langues. Il utilise JQuery pour changer la valeur pressée de 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 attribute. 
    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,

<input type="text" data-mapkey="GR_EN" /> 
<script type="text/javascript"> 
    new CharMapper("body"); 
</script>