document.activeElement returns body in Chrome and Safari

Question

On a page I have an Iframe that contains input boxes, and if I select one of those boxes in FireFox and use document.activeElement, I get the IFrame. Thats okay, I just use that IFrame and get its contentDocument, save it, then do activeElement again and now I get the input box.

However, in Chrome and Safari, when I select one of the boxes inside the IFrame and do document.activeElement, I get the body element. If I select an element outside the IFrame, document.activeElement works perfectly.

How can I get the active element in my case?

Answer 1

Not sure if this will work for you exactly but you can try a similar approach to this. Also, I believe you'll be bound to same domain restrictions with the approach below.

function showme() {

    var currentDoc = document;

    if (document.activeElement == document.body) {
        currentDoc = window.frames['child-iframe'].document;
    }

    if (currentDoc.activeElement.type == "text" 
        || currentDoc.activeElement.type == "textarea" 
        || currentDoc.activeElement.type == "checkbox") {
        currentDoc.activeElement.style.color = "red";
    }

}


window.onload = function() {
    setTimeout("showme()", 5000);
}