1

I am trying to get .focus() to work in Firefox (version 33.1.1) on a Mac. Some similar questions mentioned solutions that had the effect of .focus() without the visuals; with each of the tests below, I wasn't even able to accomplish that.

The various tests listed out below all work in Chrome but not in Firefox. The HTML used was:

<input type="text" id="test" tabindex="1">

Setting tabindex was based on this suggestion, but it didn't seem to have any effect.

I also considered using autofocus, but that won't work because I need to manipulate the focus of multiple fields as the user uses the webpage, not just for a single field on load.

Update: Rhumborl suggested below that the issue might have to do Firefox's treatment of focus events when using iframes, and sure enough that seems to be the issue. Each of the following tests works when you take it out of JSFiddle's iframe "Edit fiddle" window and instead view the output full screen. Below I've added links to the working full-screen version of each.

A. .focus()

$("#test").focus();

Fiddle (update: this works in full screen).

B. setTimeout with .focus()

setTimeout(function(){
    $("#test").focus();
},100);

Fiddle (update: this works in full screen). As suggested here, here, and here.

C. .trigger('focus')

$("#test").trigger('focus');

Fiddle (update: this works in full screen). As suggested here.

D. setTimeout with .trigger('focus')

setTimeout(function(){
   $("#test").trigger('focus');
},100);

Fiddle (update: this works in full screen). As suggested here.

E. Plain JavaScript

document.getElementById("test").focus();

Fiddle (update: this works in full screen).

F. setTimeout with plain JavaScript

setTimeout('document.getElementById("test").focus();',100)

Fiddle (update: this works in full screen). As suggested here.

G. .select()

$("#test").select();

Fiddle (update: this works in full screen). As suggested here.

H. setTimeout with .select()

setTimeout(function(){
   $("#test").select();
},100);

Fiddle (update: this works in full screen).

This may be an issue that Mozilla is going to need to fix (see here), but there do seem to be workarounds. For example, if you go to Google.com in Firefox on a Mac, focus goes to the input field (I wasn't able to puzzle out how Google was doing it, although they seem to be dealing with focus in this script).

So does anyone know of a workaround?

Community
  • 1
  • 1
Vincent
  • 2,689
  • 3
  • 24
  • 40
  • The jQuery bug report you point to suggests `iframes` make matters worse. I fortunately don't have a mac, so do any work better if you use the full screen result (add show to the end of the url e.g. http://fiddle.jshell.net/vincentpace/n28wpabv/8/show/)? Although even if that narrows it down, I don't fancy our chances... – Rhumborl Nov 28 '14 at 09:25
  • @Rhumborl That seems to have been the issue! See my edits to the question above and the links to the full-screen versions viewed by adding `show/`. If you add this suggestion as an answer below, I'll accept it as the solution. – Vincent Nov 28 '14 at 21:29

1 Answers1

0
<input type="text" id="test" autofocus="autofocus">

If you add the autofocus attribute to the input it may do what you are trying to do.

brainware
  • 81
  • 7
nico
  • 123
  • 1
  • 7
  • I considered that, but I need to manipulate the focus after the initial load on multiple input fields. I will revise my question to clarify that. – Vincent Nov 28 '14 at 04:14