detectar - keyup jquery ejemplos

Cómo descodificar el carácter presionado desde el controlador de eventos keydown() de jQuery

Question

Necesito averiguar qué carácter se escribió en un campo de texto desde el controlador que se llama con la función keydown de jQuery. key.which me da solo el código de key , pero necesito averiguar qué key caracteres ASCII representa. ¿Cómo hago esto?

Answer 1

Creé y usé la clase javascript anterior para convertir gr en caracteres. Se puede utilizar para más idiomas. Utiliza JQuery para cambiar el valor presionado por el usuario.

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;
        });
    }
};

Ejemplo,

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

Answer 2

El evento keyPress es lo que necesita para obtener qué carácter se ingresó. ( Ver solución a continuación para el evento keydown ).

keydown y keyup proporcionan un código que indica qué tecla se presiona, mientras que al presionar keypress indica qué carácter se ingresó.

Usando jQuery e.which Que puede obtener el código de clave y usando String.fromCharCode puede obtener el carácter específico que se presionó (incluida la tecla Mayús ).

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

Código:

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

Tenga en cuenta que dije jQuery''s e.which porque diferentes navegadores usan diferentes propiedades para almacenar esta información. jQuery normaliza la propiedad .which para que pueda usarla de manera confiable para recuperar el código clave.

Solución para keydown

Sin embargo, puede escribir una solución alternativa simple para que el carácter presionado funcione en el modo de keydown de keydown . La solución alternativa es crear un objeto con la clave como el carácter CharCode sin pulsar la tecla Mayús y el valor es con la tecla Mayús.

Nota: Como señaló @Sajjan Sarkar , hay algunas diferencias en el valor del código de e.which devuelto desde un navegador diferente. Leer más aquí

Se actualizó el código DEMO para normalizar el valor de código de clave de navegador cruzado. Probado y verificado en IE 8, FF y Chrome.

Código completo a continuación y DEMO actualizada: 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));
    });    
});

Más sobre eventos de teclado -

Los eventos keydown, keypress y keyup se activan cuando el usuario presiona una tecla.

keydown Se dispara cuando el usuario presiona una tecla. Se repite mientras el usuario mantiene pulsada la tecla.

pulsación de tecla Se dispara cuando se inserta un carácter real, por ejemplo, en una entrada de texto. Se repite mientras el usuario mantiene pulsada la tecla.

keyup Se dispara cuando el usuario libera una tecla, después de que se haya realizado la acción predeterminada de esa tecla.

Cuando una tecla se presiona por primera vez, se keydown evento keydown . Si la clave no es una clave modificadora, se envía el evento de keypress . Cuando el usuario libera la clave, se keyup evento keyup .

Cuando se presiona y mantiene presionada una tecla, comienza a repetirse automáticamente. Esto resulta en una secuencia de eventos similares a los siguientes que se envían:

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

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

keyup, keydown vs keypress

Los eventos keydown y keyup representan las teclas que se presionan o liberan, mientras que el evento keypress representa un carácter que se está escribiendo.

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

Referencias:

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

Hago esto. Simplemente ignorará la pulsación de tecla si el valor no es un número. Parece funcionar sin ningún problema ...

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

Answer 4

La respuesta de Selvakumar Arumugam funciona como un encanto para mí ... hasta que pruebo el teclado numérico. Así que una actualización menor aquí:

 $(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

Para la entrada de caracteres, se sugiere que use la keypress() presionada keypress() , que informará el código ASCII real para el carácter presionado. Automáticamente se encarga del caso de las letras, e ignora las imprentas sin caracteres. En cualquier caso, puede usar fromCharCode () para convertir a una representación de cadena. P.ej

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

Solo recuerde que para keydown() y keyup() , deberá realizar un seguimiento del caso utilizando el estado e.shiftKey .