Why doesn't this javascript focus() work?

Question

I have an index.html which has a huge form in it. The form is submitted by this javascript:

byId("p").value = page;
byId("nav_container").focus();
document.forms["nav_form_main"].submit();

The focus part doesn't work here...

I want the browser to focus on a specific part of the page (almost at top).

Any tips of what to do?

PS: I have tried putting the focus after the submit(), same issue there.

Thanks

Answer 1

make sure the element you want to focus has an attribute tabindex="-1", otherwise that element is not focusable.

For example

<div id="myfocusablediv" tabindex="-1"></div>

When you set the tabindex=-1 for an element it allows it to get focus() through javascript. If instead you want it to get focus through tabbing through elements, then you would set the tabindex attribute to 0.

Answer 2

What do you mean by focus? That usually focuses user input and the element name "nav_container" doesn't sound like an input - do you perhaps mean you want the browser to scroll to that element? If so, have a look at ScrollTo()

Answer 3

Once you submit the form, any focus becomes irrelevant. The document changes location to the form's action and the focus is lost anyway.

Looks like you want to set focus after the submit, in this case do it in the onload event:

window.onload = function WindowLoad(evt) {
   byId("nav_container").focus();
}

As mentioned by others, if "nav_container" is not input box it won't work either and to scroll to that position use named anchor instead.. add such anchor before the element:

<a name="nav_container_anchor" />

Then have such JS code to scroll to that location:

document.location = "#nav_container_anchor";