Question

Prior to adding this code to my page, if, when executed, I notice that all of my select boxes take 2 clicks of the user to open the drop down menu, the first click seems like it sets focus on it, then the 2nd click finally opens it. If I remove the code, the behaviour changes, and the user is able to open the drop down with all of its menu options in only 1 single click.

I am not sure what to fix or modify, so that it doesn’t take 2 clicks, im also using ie. 7 so this would be a work around of css focus. I do not wish to have any jquery please.

Thanks for all your help.

function v9_form() {
//===========================================================================================>>
    var x = document.getElementsByTagName('INPUT');
    for (var i = 0; i < x.length; i++) {
            if (x[i].type == "text" && x[i].readOnly == false) {            
        if (x[i].id != "date2" && x[i].id != "date3") {

            x[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4';};

            x[i].onblur = function() {  this.style.backgroundColor = '#FFFFFF';};
        }   


            }//end of if
    }//end of for

    var y = document.getElementsByTagName('SELECT');
    for (var i = 0; i < y.length; i++) {
            y[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
            y[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

    var z = document.getElementsByTagName('TEXTAREA');
    for (var i = 0; i < z.length; i++) {
            z[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
            z[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

}

Answer 1

This is a known issue with IE. If you change any of the style in the onfocus IE doesn’t display the dropdown choices.

A solution is to use the onfocusin event for IE:

y[i].onfocusin = function() { this.style.backgroundColor = '#FFFFC4'; }

From MSDN:

Fires for an element just prior to setting focus on that element.

Another option is to use the :focus CSS selector but you’re obviously limited to CSS with that, no complex Javascript logic.