Setting focus on textfield after refreshing another div using AJAX

Question

I've been breaking my head over the following issue now and hope you guys can point me to the (probably obvious) solution.

I have a simple web application that takes input a input field (type="text"). When the page loads, the cursor is ready to accept input. As soon as the user navigates away (onBlur) the AJAX part kicks in, I look up the code in the database and depending on the result the box on the right goes green or stays red.

After that change, I want the input field cleared and ready to receive new input. Clearing the field does work, setting focus to it does not however. I tried focus() and select(), no go... I tried to fold in a setTimeout, no go. With the current code it doesn't work in FF, chrome and IE. I hope you guys can give me a hint.

This is the webpage code:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function checkTicket(tno) {
    var xmlhttp;
    if (tno=='') {
        document.getElementById('inside').innerHTML='0';
        document.getElementById('validbox').style.backgroundColor='#FF0000';
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('inside').innerHTML=xmlhttp.responseText;
            if (document.getElementById('inside').innerHTML=='1') {
                document.getElementById('validbox').style.backgroundColor='#00FF00';
            } else {
                document.getElementById('validbox').style.backgroundColor='#FF0000';
            }
            set_focus();
        }
    }
    xmlhttp.open("GET","check_eticket.php?t="+tno,true);
    xmlhttp.send();
}
function set_focus() {
    document.form.ticketnumber.value='';
    document.form.ticketnumber.focus();
}
</script>
</head>

<body onLoad="set_focus()">
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;">
    <div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;">
        <div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;">
            <span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span>
            <form name="form">
                <input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" />
            </form>
        </div>
        <div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;">
            <div id="inside" style="display: none;">0</div>
        </div>
    </div>
</div>
</body>
</html>

Try `setTimeout(function(){ document.form.ticketnumber.focus(); }, 1);` the value change can be triggering some action in the browser that causes the focus to be lost. — Prusse, Aug 22 '12 at 15:03
I tried it with the latest version of FF and IE and it worked for me. If you are using FF then I guess you use firebug too? Maybe you find out something if you set the console to "show strict error messages" and enable "show XMLHttpRequest". — F. Müller, Aug 22 '12 at 15:26
**TRY jQuery, Use this Link as a Sample** [http://stackoverflow.com/questions/1433742/set-focus-to-field-in-div][1] [1]: http://stackoverflow.com/questions/1433742/set-focus-to-field-in-div — Vijay Sarin, Aug 22 '12 at 15:56

score 2 · Accepted Answer · edited May 23 '17 at 12:12

The problem is actually pretty easy: the "viewport" of the page is losing focus.

All "active" elements on a web page (form fields, anchors) receive a "tabindex". When you fill in the field and press "tab", the focus will move on to the next "active" element.

On your page, there is no "next" element. The browser will then set focus to the next element in the browser interface: in my case (Firefox 14.01), this next element is the tab at the top of the browser.

This tab is not part of your webpage. My browser therefore prevents the page from "stealing" back the focus.

The answer is actually pretty easy: just add an extra active element. For html4.01, the follow tags can receive focus: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA (see Tab Index on div). The html5 specification tells me that you can use a tabstop to add any html element to this list, but sadly enough, this did not (yet?) work for me.

For now, I would advise you to add an anchor to the page, as shown in the solution below.

<html>
<head>
<script type="text/javascript">
function checkTicket(tno) {
    var xmlhttp;
    if (tno=='') {
        document.getElementById('inside').innerHTML='0';
        document.getElementById('validbox').style.backgroundColor='#FF0000';
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('inside').innerHTML=xmlhttp.responseText;
            if (document.getElementById('inside').innerHTML=='1') {
                document.getElementById('validbox').style.backgroundColor='#00FF00';
            } else {
                document.getElementById('validbox').style.backgroundColor='#FF0000';
            }
            set_focus();
        }
    }
    xmlhttp.open("GET","check_eticket.php?t="+tno,true);
    xmlhttp.send();
}
function set_focus() {
    document.form.ticketnumber.value='';
    document.form.ticketnumber.focus();
}
</script>
</head>

<body onLoad="set_focus()">
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;">
    <div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;">
        <div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;">
            <span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span>
            <form name="form">
                <input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" />
            </form>
        </div>
        <div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;">
            <div id="inside" style="display: none;">0</div>
        </div>
        <a href="">bang!</a>
    </div>
</div>
</body>
</html>

I suspected that I just missed something obvious... I saw the behavior of getting my addressbar being selected in IE rather good. Still didn't ring a bell that DIV's don't get focus. — donald23, Aug 22 '12 at 18:45

Setting focus on textfield after refreshing another div using AJAX

1 Answers1

Linked