setting focus on input element created programmatically

Question

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>

Willem D'Haeseleer · Accepted Answer · 2012-04-02 09:56:25Z

2

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>

answered Apr 2, 2012 at 9:56

Willem D'Haeseleer

20.3k10 gold badges69 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Will Over a year ago

Thank you! Once you had shown my my obvious mistake, it was easy to adapt the code to create an element with the innerHTML I wanted to append and then use container.appendElement(new) to show it.

Collectives™ on Stack Overflow

setting focus on input element created programmatically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related