Как декодировать символ, нажатый из обработчика событий keydown () jQuery

The keyPress событие-это то, что вам нужно сделать, какой символ был введен. (см. ниже обходной путь для события keydown).

keydown и keyup предоставить код, указывающий, какая клавиша нажата, в то время как keypress указывает, какой символ был введен.

С помощью jQuery e.which вы можете получить код ключа и с помощью строку.fromCharCode вы можете получить специальный символ, который был нажат (в том числе shiftKey).

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

код:

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

обратите внимание, что я сказал jQuery e.which потому что разные браузеры используют различные свойства для хранения этой информации. библиотека jQuery нормализует .which свойство, так что вы можете надежно использовать его, чтобы получить ключ-код.

решение keydown

однако вы можете написать простой обходной путь, чтобы получить нажатый Символ работает на keydown.. Обходной путь заключается в создании объекта с ключом в качестве charCode без нажатия клавиши shift, а значение-с помощью клавиши shift.

Примечание: @Sajjan Sarkar указал, что есть некоторые различия в e.which значение кода ключа, возвращенное из другого браузера. подробнее здесь

Обновлено демо код для нормализации значения ключа кросс-браузера. Протестировано и проверено в IE 8, FF и Chrome.

полный код ниже и обновленный демо: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));
    });    
});

подробнее о событиях клавиатуры --

события keydown, keypress и keyup срабатывают, когда пользователь нажимает клавишу.

keydown срабатывает, когда пользователь нажимает клавишу. Он повторяется, пока пользователь держит ключ подавленный.

нажатие срабатывает, когда фактический символ вставляется, например, в текстовый ввод. Он повторяется, пока пользователь держит ключ в нажатом состоянии.

keyup срабатывает, когда пользователь отпускает ключ, после выполнения действия по умолчанию этого ключа.

при первом нажатии клавиши keydown событие. Если ключ не является ключом модификатора,keypress событие. Когда пользователь отпускает клавишу, элемент keyup событие.

когда клавиша нажата и удерживается, она начинает автоматически повторяться. Это приводит к последовательности событий, подобной следующей отправке:

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

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

клавиша вверх, клавиша вниз против нажатие

события keydown и keyup представляют нажатые или отпущенные клавиши, в то время как событие keypress представляет собой символ типизированный.

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

ссылки:

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

Я делаю это. Он будет просто игнорировать нажатие, если значение не является числом. Кажется, работает без каких-либо проблем...

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

Selvakumar Арумугам работает как шарм для меня...пока я не проверю numpad. Так что небольшое обновление здесь:

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

Я создал и использую вышеупомянутый класс javascript для преобразования символов gr в en. Он может быть использован для нескольких языков. Он использует JQuery для изменения значения, нажатого от пользователя.

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

, например,

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