Jquery ui 使用键盘导航时防止默认jquery ui选项卡行为

我正在使用jQueryUI选项卡和表来内联编辑选项卡标题。但是在可编辑文本中使用光标导航会导致jqueryui导航到它旁边的选项卡

如何防止jquery默认行为（在选项卡中禁用键盘导航）

干杯， Broncko通过以下方式解决了这个问题：

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

---

这里有一个更好的解决方案：

---

初始化选项卡时，可以解除键控事件的绑定：

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

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

---

我必须自己做这件事。这就是我的工作原理：

$.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 ] });

---

进一步信息：我目前正在使用jquery 1.8.3，但也可以将其更新为1.9.*

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