如何为大型应用程序启用键盘导航答案

【问题标题】：How To Enable Keyboard Navigation for Large Application如何为大型应用程序启用键盘导航
【发布时间】：2010-02-10 12:29:26
【问题描述】：

我有一个很大的 Asp.net（有些页面是 Ajaxable 但不是全部），我想为其激活键盘导航。

选择一些快捷键来执行或调用某些方法和函数或可见和隐藏页面元素。这些快捷键超过 50 个。

此外用户必须能够更改任何快捷方式（此时没有必要但必须这样做）

那么如何为我的应用程序启用键盘导航？

【问题讨论】：

标签： c# jquery asp.net asp.net-ajax keyboard-shortcuts

【解决方案1】：

这是我用 jQuery 为另一个项目编写的几个助手。也许你可以使用其中的一些：

App = {
    doStuff : function() {
        // a custom action
    },
    attachKeyboard : function(map) {
        jQuery(document).bind('keydown', {map: map, scope: this}, this.keyNav);
    },
    detachKeyboard : function(map) {
        jQuery(document).unbind('keydown', this.keyNav);
    },
    keyNav : function(e) {
        var key = e.keyCode || e.which;
        var map = e.data.map;
        var scope = e.data.scope;
        var keymap = {
            UP: 38,
            DOWN: 40,
            LEFT: 37,
            RIGHT: 39,
            RETURN: 13,
            ESCAPE: 27,
            BACKSPACE: 8
        };
        for( var i in map ) {
            var k = i.toUpperCase();
            if ( keymap[k] ) {
                map[keymap[k]] = map[i];
            }
        }
        if (typeof map[key] == 'function') {
            map[key].apply(scope);
        }
    }
}

像这样使用它：

App.attachKeyboard({
    up: this.doStuff,
    down: function() {
        // some other action
    },
    16: function() {
        // do stuff when charcode 16 is pressed
    }
});

如果你想改变动作，你可以解开键盘然后重新绑定：

App.detachKeyboard();
App.attachKeyboard({
    up: function() {
        // do stuff
    }
});

【讨论】：