Home/ Questions/Q 7740885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:53:27+00:00

I have problems setting the focus on an input element that has been created

  • 0

I have problems setting the focus on an input element that has been created on the fly and which has had and lost focus previously. I’ve distilled it to this simple code:

I expect the focus to ping-pong between the two input elements as you type, but on Firefox and Chrome the focus stays in the first text box after the second has been created, received focus, and sent focus back to the first. Why is this?

<html>
<head>
<script type="text/javascript">
<!--
function onkey(event) {
    if(event.target.id == "b") {
        var c = document.getElementById("c");
        if(!c) {
            document.getElementById("a").innerHTML += "<br/><input id=\"c\" type=\"text\"/>";
            c = document.getElementById("c");
            document.getElementById("status").textContent = "created c "+c
        } else {
            document.getElementById("status").textContent = "activing c "+c;
        }
        c.onkeydown = onkey;
        c.focus();
    } else {
        document.getElementById("status").textContent = "activing b";
        document.getElementById("b").focus();
    }
}

function test() {
    var b = document.getElementById("b");
    b.onkeydown = onkey;
    b.focus();
}
//-->
</script>
<body onload="test();">
<noscript>
Sorry, you need javascript.  Not much to see here otherwise; move along.
</noscript>
<div id="status"></div>
<div id="a">
<input id="b" type="text"/>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, you should use jQuery.

    You are recreating the input field b when you add field c by using the += operator together with innerHTML, effectively destroying the event you previously created on field b.

    The code below will fix your problem but you should definitely use jQuery for this.

    <html>
<head>
<script type="text/javascript">
<!--
function onkey(event) {
    console.log(event.target.id);
    if(event.target.id == "b") {
        var c = document.getElementById("c");
        if(!c) {
            // here you reset all html within the a tag, destroying ALL events
            document.getElementById("a").innerHTML += "<br/><input id=\"c\" type=\"text\"/>";
            c = document.getElementById("c");
            // rebinding the event to b will fix the issue 
            document.getElementById("b").onkeydown = onkey;
            document.getElementById("status").textContent = "created c ";
        } else {
            document.getElementById("status").textContent = "activating c ";
        }
        c.onkeydown = onkey;
        c.focus();
    } else {
        document.getElementById("status").textContent = "activating b";
        document.getElementById("b").focus();
    }
}

function test() {
    var b = document.getElementById("b");
    b.onkeydown = onkey;
    b.focus();
}
//-->
</script>
<body onload="test();">
<noscript>
Sorry, you need javascript.  Not much to see here otherwise; move along.
</noscript>
<div id="status"></div>
<div id="a">
<input id="b" type="text"/>b
</div>
</body>
</html>
    • 0