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

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

65 голосов
/ 08 февраля 2010

Мне нужно выяснить, какой символ был введен в текстовое поле из обработчика, который вызывается функцией keydown jQuery. key.which дает мне только код ключа, но мне нужно выяснить, какой символ ASCII key представляет. Как мне это сделать?

Ответы [ 5 ]

104 голосов
/ 29 октября 2012

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

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

С помощью jQuery e.which вы можете получить код клавиши, а с помощью String.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.

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

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

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

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

События 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/

keyup, keydown vs 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

93 голосов
/ 08 февраля 2010

Для ввода символов предлагается использовать keypress(), который сообщит фактический код ASCII для нажатого символа. Он автоматически обрабатывает регистр букв и игнорирует не символьные нажатия. В любом случае вы можете использовать fromCharCode () для преобразования в строковое представление. Э.Г. 

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

Просто помните, что для keydown() и keyup() вам придется отслеживать дело, используя состояние e.shiftKey.

1 голос
/ 18 августа 2016

Ответ Сельвакумара Арумугама работает для меня как заклинание ... до тех пор, пока я не проверю 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/

1 голос
/ 21 ноября 2013

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

    $("input").on("keypress", function(e) {
        if(!jQuery.isNumeric(String.fromCharCode(e.which)))
            return false;
    });
0 голосов
/ 24 мая 2017

Я создал и использовал вышеупомянутый класс 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>
...