javascript - 使用 charCodeAt() 从 KeyCode 中检索字符

Question

我正在尝试编写一个 Javascript/jQuery 函数，它将自动将键盘快捷键绑定(bind)到我的网页。我想到的方法如下:

1. 循环遍历类以“key-”开头的所有元素
2. 对于每个元素，从类中检索键组合，例如'key-ctrl-s' 将返回 Ctrl+S
3. 将这些特定键组合的事件绑定(bind)到文档

非常基本的算法，至少我是这么认为的...问题即将到来...

例如，我可以输入以下内容:

<a href="javascript:void(0)" class="some_other_class ctrl+s">Save</a>
<a href="javascript:void(0)" class="ctrl+shift+s">Save As</a>

上述代码将生成以下键盘快捷键:Ctrl+S 和 Ctrl+Shift+< kbd>S

当按下这些键时，相关 html 元素的 click 事件将被触发...

问题

如上所述，这里的算法非常简单，但是，像往常一样，在尝试编写它时就会出现问题。

我不知道如何知道自动绑定(bind)事件时要监听哪个键码 (e.which)。

例如:

使用上面的 HTML 和下面的 jQuery，我们可以得到到目前为止(忽略正则表达式之类的东西):

function keyboardShortcuts(){
    // Loop through all elements with a class containing 'key-'
    $("[class*='key-']").each(function(){
        // Using a regular expression here, separate the class into individual keys
        // whilst ignoring other classes and the 'key-' prefix
        var keys = $(this).attr('class').match(/REGEX HERE/);

        // THIS IS WHERE THE CODE GETS A LITTLE MESSY
        // I AM VERY UNSURE ABOUT THE FOLLOWING

        // Define all special characters and set them to false
        var ctrl = false, alt = false, shift = false;

        // First test for special characters
        // Test for ctrl key
        if(keys.indexOf('ctrl')!=-1){
            ctrl = true;
            // Remove ctrl from the keys array
            keys.splice(keys.indexOf('ctrl'),1)
        }
        // Test for alt key
        if(keys.indexOf('alt')!=-1){
            alt = true;
            // Remove alt from the keys array
            keys.splice(keys.indexOf('alt'),1)
        }
        // Test for shift key
        if(keys.indexOf('shift')!=-1){
            shift = true;
            // Remove shift from the keys array
            keys.splice(keys.indexOf('shift'),1)
        }

        // Determine special characters to test for
        if(ctrl&&alt&&shift){

            // Bind the keypress event to the document

            $(document).keypress(function(e) {
                if((e.ctrlKey||e.metaKey)&&e.altKey&&shiftKey) {

                    var continue = true;

                    // Test for other characters in keys array
                    for(var i=0;i<keys.length;i++){

                        // THIS IS WHAT I AM REALLY UNSURE ABOUT
                        if(keys.indexOf(charCodeAt(e.which))==-1){
                            // Correct key was not pressed so do not continue
                            continue = false;
                        }
                    }

                    if(continue){
                        e.preventDefault();
                        // Proceed to triggering the click event
                        // No more help needed from here...
                    }
                }
                return true;
            });
        }else if(ctrl&&alt){

        }else if(ctrl&&shift){

        }else if(shift&&alt){

        }else if(ctrl){

        }else if(alt){

        }else if(shift){

        }
    });
}

正如你从上面看到的，代码相当冗长，但我根本看不到另一种编写它的方式......除了可能在这里和那里对数组进行一些整理之外，但即便如此，嵌套的 if声明几乎是必要的，不是吗？

最后，我的问题

排除代码相当困惑并且可能可以写得更好一点/更好的事实(如果您确实对此有看法，请提供)，我的实际问题是引用以下行:

keys.indexOf(charCodeAt(e.which))==-1

这是从所有浏览器的字符代码中检索字符的可靠方法吗？如果不行的话有没有更好的办法？

任何人对代码的其余部分有任何意见，请发帖，希望得到一些反馈。

Answer 1

当我开始做这件事时，我并不打算重写整个事情。但我做到了，你可以看到它在 this jsfiddle 上工作。 .

该技术是找到所有目标元素并构建每个元素映射到的键组合的列表。我们将它们存储在数组 keybindings 中，每次有人按下某个键时，我们都会在整个列表中查找匹配项。如果找到一个，我们就会触发该元素上的单击事件。

我使用了 keydown 而不是 keypress 因为你实际上用它获取了修饰符信息。我还改进了类字符串解析，但我确信它可以变得更干净一些。

这是 JS 代码。

var keybindings = [];

$('[class*="key-"]').each(function (idx, val) {
    var keyspec = {
        which: 0,
        altKey: false,
        shiftKey: false,
        ctrlKey: false,
        element: val
    };

    var keystring = $(val).attr('class').toLowerCase();
    var match = /key-\S+/.exec(keystring);
    var parts = match.toString().split('-');
    keyspec.which = parts[ parts.length-1 ].toUpperCase().charCodeAt(0);
    for (var jdx in parts) {
        if (parts[jdx] == 'alt') keyspec.altKey = true;
        else if (parts[jdx] == 'shift') keyspec.shiftKey = true;
        else if (parts[jdx] == 'ctrl') keyspec.ctrlKey = true;
    }
    keybindings.push( keyspec );
});

$(document).keydown( function(evt) {
    $.each(keybindings, function(idx, oneBind) {
       if (evt.which == oneBind.which
           && evt.altKey == oneBind.altKey
           && evt.shiftKey == oneBind.shiftKey
           && evt.ctrlKey == oneBind.ctrlKey)
           $(oneBind.element).click();
    });
});

当然，现在我想到可能已经有一个用于此目的的 jquery 插件，我们可以使用它。