使用 jquery-blockui，也禁止跳转到被阻止的元素

Question

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

Link 到插件：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 并且可能混淆第 3 方 JS。所以我用 -2 来区分我的调用和其他小部件。

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

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

使用 jquery-blockui，也禁止跳转到被阻止的元素

Using jquery-blockui, also disallow tabbing to blocked elements

jquery

jquery-plugins

blockui

jquery-blockui