使用键盘导航时阻止默认的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 
    } 
});