web-dev-qa-db-fra.com

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

Je dois déterminer quel caractère a été saisi dans un champ de texte depuis le 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?

jqueryevent-handlingcharacterkeydown
64
Chetan

Pour la saisie de caractères, il est suggéré d'utiliser keypress(), qui indiquera le code réel ASCII 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.

93
Max Shawabkeh

L'événement keyPressest ce dont vous avez besoin pour connaître le caractère saisi. ( Voir ci-dessous la solution de contournement pour l'événement keydown ).

keydownet keyupfournissent un code indiquant quelle touche est enfoncée, alors que keypressindique le caractère saisi.

En utilisant jQuery e.which, vous pouvez obtenir le code de la clé et en utilisant String.fromCharCode vous pouvez obtenir le caractère spécifique sur lequel vous avez appuyé (y compris shiftKey).

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

Code: 

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

Remarque J'ai dit le e.which de jQuery 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 extraire le code de clé.

Solution de contournement pour keydownname __

Cependant, vous pouvez écrire une solution de contournement simple pour que le caractère saisi fonctionne sur keydown.. La solution de contournement consiste à créer un objet avec key en tant que charCode sans la touche Maj enfoncée et la valeur avec Maj.

Remarque: Comme @ Sajjan Sarkar a souligné qu'il existe certaines différences dans la valeur de code clé e.which renvoyée par un navigateur différent. Lisez la suite ici

Mise à jour du code DEMO pour normaliser la valeur du code source dans plusieurs navigateurs. 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));
    });    
});

En savoir plus sur les événements de clavier -

Les événements Keydown, Keyress et Keyup se déclenchent lorsque l'utilisateur appuie sur une touche.

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

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

keyup Se déclenche lorsque l'utilisateur relâche une clé, une fois 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 keydownest envoyé. Si la clé n'est pas une touche de modification, l'événement keypressest envoyé. Lorsque l'utilisateur relâche la clé, l'événement keyupest envoyé.

Lorsqu'une touche est enfoncée et maintenue enfoncée, la répétition automatique commence. Cela se traduit par une séquence d'événements similaires au suivant:

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

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

keyup, touche en bas vs pression

Les événements keydown et keyup représentent les touches enfoncées ou relâchées, tandis que l'événement de frappe représente un caractère en cours de saisie.

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

104
Selvakumar Arumugam

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

1
rexwolf

Je fais ça. Il va simplement ignorer la pression de 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;
    });
1
Christoffer

J'ai créé et utilise la classe javascript ci-dessus pour la conversion de gr en caractères. Il peut être utilisé pour plus de langues. Il utilise JQuery pour changer 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 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>
0
George Siggouroglou