Question

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

我不确定要修复或修改的内容，因此不需要2次点击，我也使用ie。 7所以这将是一个css焦点的工作。我不希望有任何问题。

感谢您的帮助。

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中的任何样式，则不会显示下拉选项。

解决方案是对IE使用onfocusin事件：

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

来自MSDN：

在将焦点设置在该元素之前触发元素。

另一种选择是使用:focus CSS选择器，但你明显只限于CSS，没有复杂的Javascript逻辑。

Answer 2

你是this bug的受害者。

看起来这是IE的一些特殊行为。这个答案中有一些代码提供了一个可以尝试的可能的解决方法，但它的功能非常重要（适用于旧版IE的用户）。我认为你最好的选择是使用CSS伪类（如上面的答案所推荐的），或者只是删除使用IE＆lt; 8的那些功能。

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

2 个答案: