Consider this example where I have 2 input fields:
And consider t
According to this archive of whatwg.org:
An element is focusable if the user agent's default behavior allows it to be focusable or if the element is specially focusable, but only if the element is either being rendered or is a descendant of a canvas element that represents embedded content.
It seems that all browsers also don't make visibility:hidden
and display:none
input elements focusable. The following JavaScript tests in which cases is an element focusable.
function isFocusable(type) {
var element = document.getElementById(type);
result += type + ' is';
try {
element.focus();
if (element != document.activeElement)
result += ' not';
} catch (e) {
result += ' not (error thrown)';
}
result += ' focusable
';
}
var result = '';
function isFocusable(type) {
var element = document.getElementById(type);
result += type + ' is';
try {
element.focus();
if (element != document.activeElement)
result += ' not';
} catch (e) {
result += ' not (error thrown)';
}
result += ' focusable
';
}
isFocusable('text');
isFocusable('hidden');
isFocusable('disabled');
isFocusable('readonly');
isFocusable('visiblity-hidden');
isFocusable('display-none');
isFocusable('div-hidden');
document.getElementById('browser-version').innerHTML = navigator.userAgent;
document.getElementById('logger').innerHTML += result;
Here's the output in Firefox 34.0.5 and Chrome 39.0.2
Gecko/20100101 Firefox/34.0
text is focusable
hidden is not focusable
disabled is not focusable
readonly is focusable
visiblity-hidden is not focusable
display-none is not focusable
div-hidden is focusable
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
text is focusable
hidden is not focusable
disabled is not focusable
readonly is focusable
visiblity-hidden is not focusable
display-none is not focusable
div-hidden is focusable