jQuery .focus() doesn't work

Question

My goal is to focus an input field after the page is loaded using jQuery. So I tried like in this example:

HTML:

<form>
   <input type="text" tabindex="1"><br>
   <input type="text" tabindex="2"><br>
   <input type="text" tabindex="3"><br>
   <input type="text" tabindex="4"><br>
</form>

JavaScript:

$(function () {
    $("*[tabindex='3']").focus();
});

But this does not work (tested in FireFox 24.0), although this way is suggested in several other questions here on StackOverflow.

Feel free to experiment with this LIVE DEMO (Sometimes you need to click run after the first pageload).

EDIT:

Changed the example to focus on the third element as the first is focused by default. So please respect, that if your solution works with the first element it might not work with another one!

Example doesn't work on FF 24.0/Win 7 & IE 10/Win 7

EDIT 2:

As ghusse noted the example works outside the fiddle context: DEMO So the question is; what can cause the .focus() function to not work?

It works for me: both in Chrome and Firefox (latest versions). — Ionică Bizău, Oct 10 '13 at 10:39
@ArunPJohny: Yes FF24/Win 8 also. But works in Chrome and Opera 15. — Harry, Oct 10 '13 at 10:41
I've edited the example a little to focus on the third element as the browser focuses on the first element by default. (It works in chrome but not in FF or IE). Please check out this LIVE DEMO: http://jsfiddle.net/jHWDE/4/ — tmuecksch, Oct 10 '13 at 10:41
One thing to note is the code itself works, its the context that it is being called in that is not working. If you attach the same code into a button click event it works so I suspect it is some browser thing to perhaps stop malicious scripts from capturing input when you don't realise they are or something... — Chris, Oct 10 '13 at 10:55
@tmuecksch (not trolling) but just for your info, the `` closing tag is not obsolete, it has never existed — iConnor, Oct 10 '13 at 10:57
@Connor Thanks for the english lesson. I misused the word "obsolete" in this context. I inteded the meaning of "unnecessary". — tmuecksch, Oct 10 '13 at 10:59
@Connor: No it's not as you would have realized by comparing the answers. The offered solution doesn't work here, as determined below. — tmuecksch, Oct 10 '13 at 11:35

score 3 · Answer 1 · answered Oct 10 '13 at 10:45

3

This should work for you then:

setTimeout(function(){
    $("*[tabindex='3']").focus();
},  1);

Use setTimeout with a minimal delay.

answered Oct 10 '13 at 10:45

Satyam Saxena

581
2
10

1

Nope, the same problem exists :( – Harry Oct 10 '13 at 10:46
Could you please make a JS fiddle example? – tmuecksch Oct 10 '13 at 10:47

score 1 · Answer 2 · answered Oct 10 '13 at 11:04

1

I think the problems comes more from jsfiddle itself than from your code.

When displaying your example in jsfiddle, focus is set to the javascript code window.

If you display your code result in jsfiddle full screen mode, you'll see that, actually, it works.

$(function () {
  $("*[tabindex='3']").focus();
});

answered Oct 10 '13 at 11:04

ghusse

3,200
2
22
30

Thanks for this suggestion. You are right. The question is now. What causes .focus() to not work anymore as this problem appears in my project in another context. – tmuecksch Oct 10 '13 at 11:29
We need to know a little more about your project. Because, obviously, it works out of the box. You probably have something else in your code that interferes with focus. – ghusse Oct 10 '13 at 11:44

score 0 · Answer 3 · answered Oct 10 '13 at 11:01

your code seems right, maybe there is a problem with fiddle :

Your demo link doesn't work for me either, but the "show page" is fine: http://jsfiddle.net/jHWDE/26/show/

Also, I would prefer adding the "input" instead the * for optimization (this way only input element would be checked instead of every one):

$("input[tabindex=3]").focus();

jQuery .focus() doesn't work

3 Answers3