Используя jquery-blockui, также запретите переход к заблокированным элементам.

Кросс-пост с 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;
};

person SimenB    schedule 26.06.2015    source источник


Ответы (1)


У меня была такая же проблема, и я обсуждал ее с Op здесь: https://github.com/malsup/blockui/issues/121#issuecomment-129719120 В итоге я выбрал подход, который позволяет пропускать заблокированные элементы. Я изменил HTML-атрибуты tabindex заблокированных элементов. В итоге это оказалось лучшим подходом для нашего приложения, поскольку нам не нужно было изменять код blockUI. Я использовал tabindex "-2", потому что некоторые из обычных элементов, которые я заблокировал, уже имели tabindex -1. Например, средство выбора даты со скрытым div. Я не хотел перезаписывать tabindex уже скрытого 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');
person Julian    schedule 23.08.2015
comment
В итоге я выбрал слегка измененный ответ (см. проблему GitHub), но это послужило источником вдохновения для нашего решения. Спасибо! - person SimenB; 23.08.2015