Make an HTML element non-focusable
To completely prevent focus, not just when using the tab button, set disabled
as an attribute in your HTML element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="form-control" type="text"> Click this, you can see it's focusable.
<input class="form-control" type="text" readonly> Click this, you can see it's focusable.
<input class="form-control" type="text" readonly tabindex="-1"> Click this, you can see it's focusable. Not tab'able.
<input class="form-control" type="text" disabled> Click this, you can see it's <strong>not</strong> focusable.
<a href="http://foo.bar" tabindex="-1">unfocusable</a>
A negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.
See also: developer.mozilla.org
In order to make an prevent an element from taking focus ("non-focusable"), you need to use Javascript to watch for the focus
and prevent the default interaction.
In order to prevent an element from being tabbed to, use tabindex=-1
attribute.
Adding tabindex=-1
will make any element focusable, even div
elements. This means when a user clicks on it, it would likely get a focus outline, depending on the browser..
You would ideally, want this:
function preventFocus(event) {
event.preventDefault();
if (event.relatedTarget) {
// Revert focus back to previous blurring element
event.relatedTarget.focus();
} else {
// No previous focus target, blur instead
event.currentTarget.blur();
}
}
/* ... */
element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);