In Javascript setting a textarea with focus() does not work if called as a child window

Question

I have a simple test page that sets the focus to a textarea on an oninit function. However the exact code fails to do this if the page is called as a child.

Putting alert box proves that the oninit function is being called but fails to put the focus in the textbox. Pressing reload though does then focus correctly.

So given that my code works perfectly when called on a main page, and also works in a child if reload is called, then why doesn't it work the first time?

<html>
<body onload="init()">
<script type="text/javascript">
function init()
{
    document.getElementById("message").focus();
}

</script>
<textarea id="message" rows=10 cols=40></textarea>
</body>
</html>

Nothing clever here as you can, just only doesn't work if the page is loaded by window.open("test2.html");

What do you mean by "if the page is called as a child"? – jfriend00 Oct 12 '13 at 17:00 — jfriend00, Oct 12 '13 at 17:00
@jfriend00 I think he meant to `window.open('')` – Dvir Oct 12 '13 at 17:01 — Dvir, Oct 12 '13 at 17:01
Non-js-solution: There is `autofocus`, like this `Hello`. – neoneye Jul 25 '23 at 22:12 — neoneye, Jul 25 '23 at 22:12

score 16 · Answer 1 · edited Aug 08 '18 at 08:15

16

You can also use setTimeout irrespective of the event.

setTimeout(function() {
    document.getElementById("elementId").focus();
}, 0);

edited Aug 08 '18 at 08:15

Richard de Wit

7,102
7
44
54

answered Nov 13 '15 at 03:23

Ishan Liyanage

2,237
1
26
25

1

This is leveraging jquery when the issue called for specified javascript. I know it seems like splitting hairs but there are instances where jquery may not be available. – Bueno Jul 11 '16 at 21:31
1

I know, but it is always better to put an alternative answers so community can benefit from them rather than duplicate the question and repost the same answer. I think you better to learn about community guide lines. – Ishan Liyanage Jul 12 '16 at 05:38
Ishan Liyanage is right @Bueno. I just got helped by his answer. – David Dutra Dec 13 '17 at 13:00
In reactive languages (React, Preact, Svelte, etc), this solves a problem where the focus() method might not otherwise work. +1 and thanks – cssyphus Nov 02 '21 at 18:53

score 8 · Answer 2 · answered Oct 12 '13 at 17:24

8

which browser do you use? I check in firefox, chrome & IE. Your code runs perfect and focus on the textarea.

I create two file test1.html and test2.html in a same directory. In test1.html i insert the the follwing code..

<html>
<body>
<script type="text/javascript">
function init()
{
    window.open('test2.html');
}

</script>
<button onclick="init()">test</button>
</body>
</html>

And in test2.html..

<html>
<body onload="init()">
<script type="text/javascript">
function init()
{
    document.getElementById("message").focus();
}

</script>
<textarea id="message" rows=10 cols=40></textarea>
</body>
</html>

Than, I run the test1.html and click the button and test2.html appears with focus on the textarea.

answered Oct 12 '13 at 17:24

Hasib Tarafder

5,773
3
30
44

I am using Google chrome on my chromebook. I have now reproduced the fault with your test code by changing the open call to window.open('test2.html', "", 'width=530px,height=230px'); – Ian Smith Oct 12 '13 at 18:05
As per your change i also change in window.open. But the code works perfectly and focus on the textarea. – Hasib Tarafder Oct 12 '13 at 18:28
Finally found out how to open port 80 on the chromebook and connected my Mac. Test page works as expected with Safari, Chrome and Firefox on the Mac. So looks like a bug with the Arm version of Chrome - which is why this puzzled me as I believed it should have worked. – Ian Smith Oct 12 '13 at 19:41

In Javascript setting a textarea with focus() does not work if called as a child window

2 Answers2