Textbox change focus

by Ram Tobolski

HTML

<div id="div1">
    <input type="text">
</div>
<div id="div2">
    <input type="text">
</div>
<div id="div3">
    <button onClick="startTimer()">Start</button>
</div>
    <p> Click on <em>Start</em>. You should see the first text box get focus. Then start typing. After a few seconds the focus will automatically shift to the second text box.

CSS

div {
    padding: 1em;
}
button {
    cursor: pointer;
}
input {
    width: 20em;
}
input:focus {
    border-color: orange;
}

JavaScript

function startTimer() {
    $("#div1 input").val("");
    $("#div2 input").val("");
    $("#div1 input").focus();
    window.setTimeout(

    function () {
        $("#div2 input").focus();
        console.log('timer 1 done');
        window.setTimeout(

        function () {
            $("#div2 input").val(
            $("#div1 input").val() + $("#div2 input").val());
            console.log('timer 2 done');
        },
        1000);
    },
    5000);
}