Here is the HTML code we are working with:
<div>
<span>
<span id="Container1" tabindex="1" >Container1</span>
</span>
</div>
<span id="Container2" tabindex="2" >Container2</span>
Our goal is to automatically set focus to the Container2 <span> element when the page loads.
I attempted to achieve this using jQuery:
$(document).ready( function(){
$("#Container2").focus();
});
This approach works well in Chrome (Version 35.0.1916.153) and IE9. However, it does not work in Firefox (v. 30.0). After researching on Stack Overflow, I also tried:
$(document).ready( function(){
setTimeout(function () {
$("#Container2").focus();
}, 0);
});
and
$(document).ready( function(){
setTimeout(function () {
$("#Container2").trigger('focus');
}, 0);
});
but unfortunately, the result remains the same.
Furthermore, it seems that selecting the element with a mouse click is not possible until the TAB button is pressed.
After reviewing another question, it appears that the focus is correctly set but the outline is not rendered.
Is there any solution to properly set default focus in Firefox?