使用 jquery-blockui，也不允许对被阻止的元素进行制表符

Question

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

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

虽然被阻止的元素不能被点击，但仍然可以使用tabulator来访问它们，然后使用enter来激活它。是否可以在tab的时候跳过被阻塞的元素？

目前，我们只是阻止用户进入被阻止的元素，但这会阻止用户。如果能跳过被屏蔽的就更好了。

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”的 tabindex，因为我阻止的一些正常元素的 tabindex 已经是 -1。例如带有隐藏 div 的日期选择器。我不想覆盖已经隐藏的 div 的 tabindex 并可能混淆 3rd 方 JS。所以我使用 -2 来区分我的调用和其他小部件。

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

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