Checking to see if a DOM element has focus.

Question

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.

Answer 1

Could it be that the script is executing before the lightbox + textbox are rendered?

How are you opening the lightbox? Maybe post some code.

Answer 2

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.

Answer 3

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.

Answer 4

the property

element.hasFocus

works for me

Answer 5

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>

Answer 6

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.