New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make blocked elements untababble #121
Comments
I have the same issue, but this functionality was purposefully removed with this commit: d5e5b7e The commit comment reads "don't bind/unbind handler for element blocks" . I don't know why this was done, but I removed the !full check at line 515 in the version I downloaded and it works. |
@JulianRussbach Thanks! We tried it, and the report I got was that it seems to work the same as my code above; it doesn't skip to the next tabbable element. Or does it work differently for you? |
@SimenB I ended up going with a different approach that allows the blocked elements to be skipped. I changed the tabindex HTML attributes of the elements that were blocked. It ended up being the best approach for our app as we didn't have to modify the blockUI code. I used tabindex of "-2" because some of the normal elements I blocked already had a tabindex of -1. For example a date picker with a hidden div. I didn't want to overwrite the tabindex of the already hidden div and possibly confuse 3rd party JS. So I used -2 to distinguish between my calls and the other widgets. $(this).block(); $(this).unblock(); |
@JulianRussbach That works! Thanks :D Ended up with this code: var proxiedBlock = $.fn.block;
$.fn.block = function () {
var $elements = proxiedBlock.apply(this, arguments);
$elements.find(':not([tabindex=-1])').attr('tabindex',-2);
return $elements;
};
var proxiedUnblock = $.fn.unblock;
$.fn.unblock = function () {
var $elements = proxiedUnblock.apply(this, arguments);
$elements.find('[tabindex=-2]').removeAttr('tabindex');
return $elements;
}; Then we don't have to do it every time 😄 If you provide an answer to my post on Stack Overflow, I can accept it: http://stackoverflow.com/q/31070335/1850276 |
Already existing var proxiedBlock = $.fn.block;
$.fn.block = function () {
var $elements = proxiedBlock.apply(this, arguments);
var $tabbables = $elements.find(':not([tabindex=-1])');
$tabbables.each(function () {
var $this = $(this);
if (!_.isUndefined($this.attr('tabindex'))) {
$this.data('origTab', $this.attr('tabindex'));
}
$this.attr('tabindex', -2);
});
return $elements;
};
var proxiedUnblock = $.fn.unblock;
$.fn.unblock = function () {
var $elements = proxiedUnblock.apply(this, arguments);
var $tabbables = $elements.find('[tabindex=-2]');
$tabbables.each(function () {
var $this = $(this);
if (_.isUndefined($this.data('origTab'))) {
$this.removeAttr('tabindex');
} else {
$this.attr('tabindex', $this.data('origTab'));
}
});
return $elements;
}; |
While the elements blocked cannot be clicked, it's still possible to use the
tabulator
to access them, and then useenter
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.
The text was updated successfully, but these errors were encountered: