使用jquery-blockui，也不允许对被阻塞的元素进行选项卡。

Question

来自GitHub的交叉邮件：https://github.com/malsup/blockui/issues/121

链接到插件：http://malsup.com/jquery/block/

虽然无法单击被阻塞的元素，但仍然可以使用tabulator访问它们，然后使用enter来激活它们。当选项卡时，是否可以跳过阻塞的元素？

现在，我们只需要阻止用户跳入被阻塞的元素，但这会阻止用户。如果他们能跳过被封锁的那些会更好。

var proxiedBlock = $.fn.block;
$.fn.block = function () {
    var $elem = proxiedBlock.apply(this, arguments);

    $elem.on('focusin.kj', function (evt) {
        evt.preventDefault();

        $(evt.relatedTarget).focus();
    });

    return $elem;
};

var proxiedUnblock = $.fn.unblock;
$.fn.unblock = function () {
    var $elem = proxiedUnblock.apply(this, arguments);

    $elem.off('focusin.kj');

    return $elem;
};

Answer 1

我也遇到了同样的问题，并在这里与Op进行了讨论：https://github.com/malsup/blockui/issues/121#issuecomment-129719120最终采用了一种允许跳过阻塞元素的方法。我更改了被阻塞的元素的tabindex HTML属性。对于我们的应用程序来说，这是最好的方法，因为我们不需要修改blockUI代码。我使用了"-2“的表索引，因为我阻止的一些普通元素的表索引已经是-1。例如，带有隐藏div的日期选择器。我不想覆盖已经隐藏的div的表索引，可能会混淆第三方JS。因此，我使用-2来区分我的调用和其他小部件。

$(this).block();
$(this).find('input,select,a').filter(':not([tabindex=-1])').attr('tabindex',-2);

$(this).unblock();
$(this).find('[tabindex=-2]').removeAttr('tabindex');