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

68

我需要找出从jQuerykeydown函数调用的处理程序中将哪个字符键入到文本字段中。key.which仅给我键码，但是我需要弄清楚哪个ASCII字符key代表。我该怎么做呢？

jquery  event-handling  character  keydown 
— 车丹
source

Answers:

97

对于字符输入，建议您使用keypress()，它将报告所按字符的实际ASCII码。它会自动处理字母大小写，并忽略非字符印刷。无论哪种情况，都可以使用fromCharCode（）转换为字符串表示形式。例如

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

只要记住forkeydown()和keyup()，就必须使用e.shiftKeystate来跟踪案例。

— 马克斯·沙瓦布（Max Shawabkeh）
source
1
哈哈..由于某种原因，浏览器在按逗号时返回188，但是当我们将188转换为char时，返回值为¼。有趣的是，当我们将44转换为char时，浏览器将其理解为逗号！
我相信它会在旧版本的jQuery中返回1/4。在1.4.2中已修复。它为我返回逗号
— Yaplex 2011年
1
嗯，这并不代表e.shiftKey
— 山姆藏红花
我投票支持按键-它可以为国际键盘布局接收正确的字符，与keydown不同，它可以将所有内容转换为单字节字符。
— JustAMartin
哦，所以String不是var ...：（（
— Penguin9
105

该keyPress事件是您获取输入哪个字符所需要的。（有关keydown事件，请参见下面的解决方法）。

keydown并keyup提供指示按下哪个键的代码，同时keypress指示输入哪个字符。

使用jQuerye.which您可以获取键码，使用String.fromCharCode您可以获取被按下的特定字符（包括shiftKey）。

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

码：

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

请注意，我e.which之所以说jQuery是因为不同的浏览器使用不同的属性来存储此信息。jQuery规范化了该.which属性，因此您可以可靠地使用它来检索键码。

解决方法 keydown

但是，您可以编写一个简单的解决方法以使按下的字符起作用keydown。解决方法是创建一个键为charCode的对象，而无需使用shift keypress，而值使用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当用户按下一个键触发。在用户按住键的同时重复此操作。

按键时触发被插入在实际的字符，例如，文本输入。在用户按住键的同时重复此操作。

KEYUP时触发用户发布的关键，在已经执行该键的默认操作后。

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

按住某个键时，它会自动重复。这将导致发生一系列类似于以下事件的事件：

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

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

按键，按键与按键

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

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

参考文献：

  1. https://developer.mozilla.org/zh-CN/docs/DOM/KeyboardEvent

  2. http://www.quirksmode.org/dom/events/keys.html

  3. http://unixpapa.com/js/key.html

— Selvakumar Arumugam
source
1
这看起来像是一个很好的规范答案，需要等待几天，因此获得奖项前的曝光度更高
— Sam Saffron 2012年
是的，但是由于“按键事件未在任何正式规范中涵盖，因此使用它时遇到的实际行为可能因浏览器，浏览器版本和平台而异”。src：api.jquery.com/keypress AFAIK，无法获得keydown中的ASCII值，只能由上述人指出的，在keyup或keypress中获得它。
— Sajjan Sarkar
@SajjanSarkar不是。您在上得到keyCode（e.which）keydown/keyup/keypress。如果需要ASCII字符，则可以使用String.fromCharCodefunction。你没有得到这个角色keyup/keypress。
— Selvakumar Arumugam '11年
1
@Vega是和否，请尝试说出Console.log（String.fromCharCode（e.which）），然后看看您得到的分号和冒号是什么。
— Sajjan Sarkar
1
@Vega是一种很好的方法，但事实是，当我按冒号（shift +;）时，我希望代码给我“：”而不是“º：”，但您的答案仍然是最好的答案
— 。–
1

我做这个 如果该值不是数字，它将仅忽略按键。似乎可以正常工作...

    $("input").on("keypress", function(e) {
        if(!jQuery.isNumeric(String.fromCharCode(e.which)))
            return false;
    });
— 克里斯托弗
source
1

Selvakumar Arumugam的答案对我来说就像一个魅力……直到我测试了数字键盘。所以这里有一个小更新：

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

— 霸王狼
source
0

我创建并使用上述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>
— 乔治·西格罗格鲁
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.