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.

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, Oct 06 '08 at 15:31
That's certainly possible, I'm just not sure what to do to work around that. — Dan Herbert, Oct 06 '08 at 16:16

score 1 · Answer 1 · answered Oct 06 '08 at 15:32

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.

score 1 · Answer 2 · edited Jul 30 '12 at 13:11

1

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.

edited Jul 30 '12 at 13:11

Kjartan

18,591
15
71
96

answered Oct 06 '08 at 16:01

olle

1,196
7
10

I tried that. The readyState is "complete" already, which is what really bugs me. IE says the DOM element is ready, but you can't do specific things to it until it's "really ready" I guess is the best way to describe it. – Dan Herbert Oct 06 '08 at 17:47

score 1 · Answer 3 · answered Oct 06 '08 at 18:48

You can try this:

Use the endRequest event of the PageRequestManager. That event fires once an Ajax update has finished.
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>

That's exactly what I'm using right now actually. The element's focus() method is being called in the onRequestEnd() method. — Dan Herbert, Oct 06 '08 at 19:04

score 1 · Answer 4 · edited Apr 25 '18 at 10:21

1

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

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.
Try to blur() currently focused element.
If element is 'shimmed' - focus the 'shim' element.

edited Apr 25 '18 at 10:21

Aliaksandr Sushkevich

11,550
7
37
44

answered Oct 06 '08 at 20:27

Thevs

3,189
2
20
32

What do you mean by "shimmed"? – Dan Herbert Oct 08 '08 at 01:08

score 1 · Answer 5 · edited May 23 '17 at 10:27

1

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.

edited May 23 '17 at 10:27

Community

1
1

answered Aug 20 '16 at 18:09

Tomas Langkaas

4,551
2
19
34

score 1 · Answer 6 · answered Sep 25 '16 at 09:36

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 :)

Checking to see if a DOM element has focus

6 Answers6