如何解码从jQuery的keydown()事件处理程序中按下的字符

Question

我需要弄清楚哪个字符被输入到jQuery keydown函数调用的处理程序中的文本字段中.key.which只给我键码,但我需要弄清楚哪个ASCII字符key代表.我该怎么做呢？

Answer 1

该keyPress事件是您输入哪个角色所需要的.(有关keydown事件,请参阅下面的解决方法).

keydown并keyup提供一个代码,指示按下哪个键,同时keypress指示输入了哪个字符.

使用jQuery,e.which您可以获取密钥代码并使用String.fromCharCode,您可以获得按下的特定字符(包括shiftKey).

演示: http ://jsfiddle.net/9TyzP/3

码:

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

注意我说jQuery是e.which因为不同的浏览器使用不同的属性来存储这些信息.jQuery规范化.which属性,以便您可以可靠地使用它来检索密钥代码.

解决方法 keydown

但是,您可以编写一个简单的解决方法来使按下的字符工作keydown.解决方法是使用key创建一个对象作为charCode而不使用shift键,并且值使用shift键.

注意:正如@Sajjan Sarkar所指出的,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用户按下某个键时触发.当用户按下键时,它会重复.

keypress在插入实际字符时触发,例如,文本输入.当用户按下键时,它会重复.

keyup在用户释放密钥后,在执行该密钥的默认操作后触发.

首次按下某个键时,将keydown发送该事件.如果该键不是修饰键,keypress则发送该事件.当用户释放密钥时,将keyup发送该事件.

按下并按住某个键时,它开始自动重复.这导致发送类似于以下事件的一系列事件:

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

演示: http ://jsfiddle.net/9TyzP/1/

keyup,keydown vs keypress

keydown和keyup事件表示按下或释放的键,而keypress事件表示正在键入的字符.

演示: 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

Answer 2

对于字符输入,建议您使用keypress(),它将报告按下的字符的实际ASCII代码.它会自动处理字母大小写,并忽略非字符按下.在任何一种情况下,您都可以使用fromCharCode()转换为字符串表示形式.例如

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

请记住,对于keydown()和keyup(),你必须使用e.shiftKey状态跟踪案例.