如何啓用大型應用程序的鍵盤導航

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