javascript - 应用功能时，所有选择框都需要单击 2 次才能打开下拉菜单？

Question

在将这段代码添加到我的页面之前，如果在执行时，我注意到我所有的选择框都需要用户点击 2 次才能打开下拉菜单，第一次点击似乎将焦点设置在它上面，然后第二次点击终于打开了。如果我删除代码，行为会发生变化，用户只需单击一次即可打开包含所有菜单选项的下拉菜单。

我不确定要修复或修改什么，这样就不需要点击 2 次，我也在使用 ie。 7 所以这将是 css 焦点的解决方法。我不希望有任何 jquery。

感谢您的帮助。

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

这是 IE 的一个已知问题。如果您更改 onfocus 中的任何样式，IE 不会显示下拉选项。

一个解决方案是使用 onfocusin IE 事件:

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

来自 MSDN :

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

另一种选择是使用 :focus CSS 选择器，但您显然只能使用 CSS，没有复杂的 Javascript 逻辑。