如何启用大型应用程序的键盘导航

Question

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

某些快捷键选择做或调用一些方法功能或可见并隐藏页面元素。这些快捷键超过50个键。

此外，用户必须能够改变任何快捷键（此时它是没有必要的，但它有许多工作要做）

那么，怎样才能启用键盘导航应用？

Answer 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 
    } 
});