Question

Cross-post from GitHub: https://github.com/malsup/blockui/issues/121

Link to plugin: http://malsup.com/jquery/block/

While the elements blocked cannot be clicked, it's still possible to use the tabulator to access them, and then use enter to activate it. Would it be possible to skip the blocked element when tabbing?

For now, we just stop the user from tabbing into the blocked elements, but this stops the user. It'd be better if they could skip the blocked ones.

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

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

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

Using jquery-blockui, also disallow tabbing to blocked elements

1 个答案: