Weird focus() behavior

Question

My goal is to open an input element in a popup and focus that input.

So logically, I have tried $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but they do not work; but when I change tab and come back to my tab the input element is in focus. Has anybody seen something similar? Or know how to explain this, or even better, know how to fix this...

P.S. For comments: yes, it is the only input with id "input" on my page, and yes I have an input element with id "input" on my page, and yes, code for focusing elements is called after the input has been added to the dom.

Calling `.focus()` from within some other event handler (like something that switches tabs) can be a problem. In my experience, you can solve it by wrapping the focus call in a timeout handler, with a very short timeout time. And `$("#input").focus()` is all you need (in the timeout handler). — Pointy, Dec 09 '15 at 15:03
P.P.S: and no you didn't have provided any MCVE :) But i guess Pointy is right. One more thing, hidden element cannot be focused, maybe that's more relevant then to focus it once shown — A. Wolff, Dec 09 '15 at 15:04
See also [Why is setTimeout(fn, 0) sometimes useful?](http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful) — James Thorpe, Dec 09 '15 at 15:04
I have tried this with wrapping into timeout and nothing happens. Also it seems that is only related for my project. But I'm really interested to found out why input is in focus when i change tab and come back to my page or even when chrome lost focus. — Grissom, Dec 09 '15 at 15:10
@Grissom But in which context are you calling your snippet? Once the popup is loaded? Same behavour using `autofocus` attribute? — A. Wolff, Dec 09 '15 at 15:11
@A.Wolff Yes everything is loaded when i tried to focus it. autofocus does work but only first time when opening popup. — Grissom, Dec 09 '15 at 15:12
@Grissom We really need some link to check it. At least how do you call `$("#input").focus()`??? — A. Wolff, Dec 09 '15 at 15:13
It start working, not sure how, it seems that was just issue with chrome, sorry everyone for bothering — Grissom, Dec 09 '15 at 15:14
change the name of the input the browser creates default ids for elements unless its been already taken — johnny 5, Dec 09 '15 at 15:14

score 1 · Answer 1 · edited Dec 10 '15 at 09:35

1

window.load = function(){$("#input").focus();}

Basically window.load is the event which only fires when all elements of page are loaded.

You can add above code within page anywhere. Preferably at the last of page within <script type="javascript"> </script>. So after all elements are loaded, it will set focus to input field.

edited Dec 10 '15 at 09:35

wmk

4,598
1
20
37

answered Dec 09 '15 at 17:16

Alpesh Panchal

1,723
12
9

1

With explanation a good answer becomes a useful answer. – wmk Dec 09 '15 at 19:26
Basically windows.load is the event which only fires when all elements of page are loaded. You can add above code within page anywhere. Preferably at the last of page within javascript script. So after all elements are loaded, it will set focus to input field. – Alpesh Panchal Dec 10 '15 at 04:24
I added your comment to the answer using the "edit" function. Thanks for the explanation! – wmk Dec 10 '15 at 09:36

score 0 · Answer 2 · answered Dec 09 '15 at 15:08

From my comment above, here's what I'm suggesting:

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

That arrangement lets the current event thread finish, including any "native" actions the browser wants to perform. The timeout can then run in a context where the only change to the page state will be setting the focus.

Weird focus() behavior

2 Answers2