JavaScript - How to get focused control

Today I had to solve a very ugly JavaScript bug.

I was building this advance AutoCompleteTextBox control (Don't ask why. I know there are many of them ready out there including the ASP.NET Ajax toolkit) and i had a problem of focusing. Every time the div containing the results of the key that was typed the focus went somewhere else and when users clicked the up and down arrow it scrolled the entire page, which was not the behavior I was looking for.

Anyway, During my request for the focused control I found an interesting property that the "document" object has that is unique to IE. It is called document.ActiveElement. This property will return a reference to the focused control. As it turns out when the page is loaded this property is set to the body element and it then sets when the mouse is clicked (after mouse down). Now, it the mouse target is a "focusable" element like the input types then the document.ActiveElement property will be set to this target. otherwise it will set to it's parent.

One can change this property only if he call some other control's "focus()" function.

For more information: http://msdn.microsoft.com/en-us/library/ms533065(VS.85).aspx

Enjoy