1

We have following HTML:

<div>
    <span>
        <span id="Container1" tabindex="1" >Container1</span>
    </span>
</div>
<span id="Container2" tabindex="2" >Container2</span>

And we need set focus to the Container2 <span> element when page is loaded.

I tried following jquery:

$(document).ready( function(){

    $("#Container2").focus();
});

It works fine in the Chrome (Version 35.0.1916.153) and IE9. But in the Firefox (v. 30.0) it doesn't work. According to this question I also tried

$(document).ready( function(){

    setTimeout(function () {
                    $("#Container2").focus();
               }, 0);
});

and 

$(document).ready( function(){

    setTimeout(function () {
                   $("#Container2").trigger('focus');
               }, 0);
});

but it is the same result.

Also it isn't possible select element with mouse click until we press TAB button.

I looked over this question and it seems focus is set properly but outline is not rendered.

Is it any way to set default focus in Firefox?

Community
  • 1
  • 1
DWuser
  • 13
  • 3
  • "The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, – Nico O Jul 24 '14 at 17:11
  • 1
    Actually, it seems to work, when you don't use the timeout: http://jsfiddle.net/BVS29/87/ but you will have to watch it outside of jsfiddle: http://fiddle.jshell.net/BVS29/87/show/ This is working because of the `tabindex` – Nico O Jul 24 '14 at 17:22
  • Nico, thank you for reply. You are right. It's working when we use "full screen result" [link](http://jsfiddle.net/BVS29/87/embedded/result/). But we still have a problem with select element with mouse click until we press TAB button. Also we cannot set focus after that like [here](http://jsfiddle.net/BVS29/104/). Do you have idea? – DWuser Jul 25 '14 at 11:15
  • It would be useful to explain your usecasae. Like you read in the jQuery docu it's deprecated behaviour to be able to focus non input/href elements. Why do you want to do this? I guess it would be the best to change the spans to input elements and remove their apperance as such. – Nico O Jul 25 '14 at 11:27
  • We have tree structure of items and we need to implement navigation by using keyboard's arrow buttons. Some of items represented by tags other by . It seems problems is not in span tags but in firefox focus outline. – DWuser Jul 25 '14 at 12:03

3 Answers3

0

if you want the element to gain focus on the document load, just specify the HTML-5 attribute "autofocus". 

<span id="Container2" tabindex="2" autofocus>Container2</span>
awarrier99
  • 3,628
  • 1
  • 12
  • 19
0

The code at the start of the question works when tested standalone. Something in jsfiddle is preventing it from working. If the code does not work in your context, then there is some other code intervening.

You can alternatively use simple plain JavaScript:

<script>
window.onload = function() {
  document.getElementById('Container2').focus();
}
</script>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

This is worth a read: http://www.w3.org/html/wg/drafts/html/master/editing.html#attr-tabindex

The user agent should follow platform conventions to determine if the element's tabindex focus flag is set and, if so, whether the element and any focusable areas that have the element as their DOM anchor can be reached using sequential focus navigation, and if so, what their relative position in the sequential focus navigation order is to be. Modulo platform conventions, it is suggested that for the following elements, the tabindex focus flag be set:

  • a elements that have an href attribute
  • link elements that have an href attribute
  • button elements
  • input elements whose type attribute are not in the Hidden state
  • select elements
  • textarea elements
  • menuitem elements

But: It seems that your usecase is valid reason to ignore the platform conventions for focus.

One valid reason to ignore the platform conventions and always allow an element to be focused (by setting its tabindex focus flag) would be if the user's only mechanism for activating an element is through a keyboard action that triggers the focused element.

Your only current problem seem to be, that Firefox is not showing an outline, when you tab an element. Please have a look at this Demo: http://jsfiddle.net/DBEjV/1/

Here is some example CSS, to style elements that have :focus. Try to set this and see if your problems persists.

Custom focus style:

:focus
{
    box-shadow: blue 0px 0px 1px 1px;
    outline: none;
}

You still should consider to just get rid of the tabindex and replace your <span> with valid <a> links (targeting the desired tree node). You should then have the browser taking care of the correct tab ordering and would not ignore the rule postet above.

Nico O
  • 13,762
  • 9
  • 54
  • 69