使用鍵盤導航時阻止默認的jquery-ui選項卡行爲

Question

我正在使用jquery-ui選項卡和可鑲嵌內聯編輯選項卡標題。但使用可編輯文本中的遊標進行導航會導致jquery-ui導航到其旁邊的選項卡。

我該如何防止jquery默認行爲（禁用標籤中的keyboad導航）。

乾杯， Broncko

Answer 1

要解決它：

$.widget("ui.tabs", $.ui.tabs, { 
    options: { 
     keyboard: true 
    }, 
    _tabKeydown: function(e) { 
     if(this.options.keyboard) { 
     this._super('_tabKeydown'); 
     } else { 
     return false; 
     } 
    } 
}); 

Answer 2

更好的解決方案從這裏http://www.daveoncode.com/2013/09/18/how-to-disable-keyboard-navigation-in-jquery-ui-tabs/：

jQuery('.foo').tabs({ 
activate: function(e, ui) { 
    e.currentTarget.blur(); 
    } 
}); 

Answer 3

有可能取消綁定的keydown事件時，標籤被初始化：

$('#tabs').tabs({ 
    create : function() { 
    var data = $(this).data('tabs'); 

    data.tabs.add(data.panels).off('keydown'); 
    } 
}); 

Answer 4

只是自己做這個。這是對我工作：

$.widget("ui.tabs", $.ui.tabs, { 
    _tabKeydown: function (event) { 
     if (event.keyCode !== 38 && event.keyCode !== 40) { 
      this._super(event); 
     } 
    } 
}); 

可以使用event.keyCode替代密鑰的任意組合，甚至使其定製的東西，如：

$.widget("ui.tabs", $.ui.tabs, { 
    options: { 
     overrideKeyCodes: [], 
    }, 
    _tabKeydown: function (event) { 
     var isOverride = false; 
     if (Object.prototype.toString.call(this.options.overrideKeyCodes) === '[object Array]') { 
      for (i = 0; i < this.options.overrideKeyCodes.length; i++) { 
       if (event.keyCode === this.options.overrideKeyCodes[i]) { 
        isOverride = true; 
        break; 
       } 
      } 
     } 

     if (!isOverride) { 
      this._super(event); 
     } 
    } 
}); 

$('#MyTabs').tabs({ overrideKeyCodes: [ 38, 40 ] }); 

甚至更​​好，你可以添加自己的自定義行爲：

$.widget("ui.tabs", $.ui.tabs, { 
    options: { 
     overrideKeyCodes: {}, 
    }, 
    tabKeydown: function (event) { 
     if (this.options.overrideKeyCodes.hasOwnProperty(event.keyCode)) { 
      if (typeof this.options.overrideKeyCodes[event.keyCode] === 'function') { 
       this.options.overrideKeyCodes[event.keyCode](event, this._super(event)); 
      } 
     } 
     else { 
      this._super(event); 
     } 
    } 
}); 

$('#MyTabs').tabs({ 
    overrideKeyCodes: { 
     40: function (event, callback) { 
      console.log(event.keyCode); 
     }, 
     38: function (event, callback) { 
      console.log(event.keyCode); 
      if (callback) { 
       callback(); 
      } 
     }, 
     32: null //just let the space happen 
    } 
});