[jQuery] tabindex and <input type="file" /> different in Firefox and IE

Question

When you render:

<input type="file" />

you get a box and a button, right? (At least in Firefox and IE.)

On the one hand, in Firefox you can only tab to (focus) the button, but in IE you can tab to (focus) both the box and the button.

On the other hand, I want to get IE to behave like Firefox, I mean, I need to get rid of the box focus. Think of the user navigating through the keyboard.

(The reason is because <input type="file" /> won't be visible. Instead, a <div> with a background-image will pretend to be the <input type="file" />.)

Answer 1

If you're wanting to defer to the div, why not attach an OnFocus() event to the submit, and call the focus() event function on the div within the function:

$("#MySubmit").focus(function(){
  $("#MyDiv").focus();
});