I've got a lightbox textbox that is displayed using an AJAX call from an ASP.NET UpdatePanel. When the lightbox is displayed, I use the focus() method of a textbox that is in the lightbox to bring focus to the textbox right away.

When in Firefox, the text box gains focus with no problem. In IE, the text box does not gain focus unless I use

setTimeout(function(){txtBx.focus()}, 500);

to make the focus method fire slightly later, after the DOM element has been loaded I'm assuming.

The problem is, immediately above that line, I'm already checking to see if the element is null/undefined, so the object already should exist if it hits that line, it just won't allow itself to gain focus right away for some reason.

Obviously setting a timer to "fix" this problem isn't the best or most elegant way to solve this. I'd like to be able to do something like the following:

var txtBx = document.getElementById('txtBx');

if (txtPassword != null) {
    txtPassword.focus();
    while (txtPassword.focus === false) {
        txtPassword.focus();
    }
}

Is there any way to tell that a text box has focus so I could do something like above?

Or am I looking at this the wrong way?

Edit
To clarify, I'm not calling the code on page load. The script is at the top of the page, however it is inside of a function that is called when ASP.NET's Asynchronous postback is complete, not when the page loads.

Because this is displayed after an Ajax update, the DOM should already be loaded, so I'm assuming that jQuery's $(document).ready() event won't be helpful here.

I've got a lightbox textbox that is displayed using an AJAX call from an ASP.NET UpdatePanel. When the lightbox is displayed, I use the focus() method of a textbox that is in the lightbox to bring focus to the textbox right away.

When in Firefox, the text box gains focus with no problem. In IE, the text box does not gain focus unless I use

setTimeout(function(){txtBx.focus()}, 500);

to make the focus method fire slightly later, after the DOM element has been loaded I'm assuming.

The problem is, immediately above that line, I'm already checking to see if the element is null/undefined, so the object already should exist if it hits that line, it just won't allow itself to gain focus right away for some reason.

Obviously setting a timer to "fix" this problem isn't the best or most elegant way to solve this. I'd like to be able to do something like the following:

var txtBx = document.getElementById('txtBx');

if (txtPassword != null) {
    txtPassword.focus();
    while (txtPassword.focus === false) {
        txtPassword.focus();
    }
}

Is there any way to tell that a text box has focus so I could do something like above?

Or am I looking at this the wrong way?

Edit
To clarify, I'm not calling the code on page load. The script is at the top of the page, however it is inside of a function that is called when ASP.NET's Asynchronous postback is complete, not when the page loads.

Because this is displayed after an Ajax update, the DOM should already be loaded, so I'm assuming that jQuery's $(document).ready() event won't be helpful here.

• javascript
• internet-explorer

• Could it be that the script is executing before the lightbox + textbox are rendered? How are you opening the lightbox? Maybe post some code. – Diodeus - James MacFarlane Commented Oct 6, 2008 at 15:31
• That's certainly possible, I'm just not sure what to do to work around that. – Dan Herbert Commented Oct 6, 2008 at 16:16
• Does the method work if you setTimeout() with a delay of 0? – Aintaer Commented Aug 8, 2012 at 20:44

6 Answers 6

Try putting the javascript that sets focus at the end of the page instead of the beginning or having it fire after the page loaded event. That will help ensure that the DOM is completely loaded before setting focus.

I've used FastInit for this. JQuery $(document).ready() would also work.

You can try this:

1. Use the endRequest event of the PageRequestManager. That event fires once an Ajax update has finished.
2. Focus the textbox in the event handler

Here is some sample code:

<script type="text/javascript">
    function onRequestEnd()
    {
     var txtBx = $get('txtBx');
     txtBx.focus();
    }  
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd);
</script>

To focus the textbox initially you can use the pageLoad function (shortcut to the load event of the Application client-side object):

<script type="text/javascript">
function pageLoad()
{
    var txtBx = $get('txtBx');
    txtBx.focus();
}
</script>

you could try something like this [IE Specific]. (untested)

theAjaxCreatedElement.onreadystatechange = function() {
    if ( this.readyState != "complete" ) 
        return;
    this.focus();
};

Another way might be to change the background color of the element with onfocus, then retrieve it with js check if it is what it should be, if not: refocus the element.

It seems that IE does not update the DOM until after the script has finished running. Thus, a loop testing for focus will not allow the DOM to update. Using setTimeout is probably the only working solution.

Your example with .focus() is a well known example, see e.g. this answer.

Have you tried adding the autofocus="autofocus" attribute to the textbox element you are calling via Ajax?

Normally, when I need certain additional JavaScript functionality to run on dynamic content, I'll simply add that JavaScript to the content being called as well.

That JavaScript will also execute after it's added to the DOM. I don't see a point in writing JavaScript to your parent file and then "listening" for changes to the DOM. Like you mentioned, setTimeout() is more of a hack than anything else for something like this :)

There are several things in IE, that does the trick:

1. If focusing element has different z-index - you can quickly set z-index to that of currently focused element (possibly setting hidden attribute), set focus, and then set it back to original z-index.

2. Try to blur() currently focused element.

3. If element is 'shimmed' - focus the 'shim' element.