为什么选择OnFocus在IE中不起作用?

经过一点测试,在我看来,如果以任何方式修改样式,IE都不会打开下拉列表。

是的,那里的虫子很好。任何更改选择框的操作(包括任何样式更改,甚至是由更改父类名触发的更改)都会使IE为其重新创建OS小部件,这会导致关闭它的副作用。所以下拉列表是打开的,但在渲染之前立即关闭。如果在后台更改函数上设置超时,您可以看到它随后发生。

您需要的是一个事件,在聚焦之前,您可以更改样式,使下拉菜单在打开之前关闭。幸运的是, there is one !但这只是。对于其他浏览器(包括IE8),最好使用简单的CSS :focus 选择器:

<style>
    select { background-color: #BDE5F8; }
    select:focus, select.focus { background-color: white; }
</style>
<select>
        <option>choose...</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

<!--[if lt IE 8]><script>
    // Fix lack of :focus selector for select elements in IE7-
    //
    var selects= document.getElementsByTagName('select');
    for (var i= selects.length; i-- >0;) {
        var select= selects[i];
        select.onfocusin= function() {
            this.className= 'focus';
        };
        select.onfocusout= function() {
            this.className= '';
        };
    }

    // Or, the same expressed in jQuery, since you mentioned using it
    //
    $('select').bind('focusin', function() {
        $(this).addClass('focus');
    }).bind('focusout', function() {
        $(this).removeClass('focus');
    });
</script><![endif]-->

在测试了更多之后,我觉得最好的方法是改变颜色 onmouseover ,然后重新打开 onblur ,像

<select 
    onmouseover="this.style.backgroundColor='#fff';"
    onblur="this.style.backgroundColor='#bde5f7'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

由于使用键盘导航下拉列表不显示选项,因此事件必须是一个 onfocus 事件。

当您不再超过实际值时,OnMouseOut事件就会触发。 <select> ,但也许这可以通过一些jquery事件处理来解决?

否则,我不知道。:)

看起来确实是个很奇怪的虫子。它显然在于在焦点期间设置任何不同的设置,例如,选择的类。

一个想法是只在 选择。。。 作为解决方法的选项(在其他浏览器上不起作用,请对此浏览器进行检查)。

<select>
        <option style="background: red none">choose...</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

我花了很长时间试图解决这个问题,并为IE8找到了一个简单的解决方案-只使用鼠标向下而不是聚焦。虽然在所有情况下这可能不是绝对理想的,但对于样式更改来说,它确实工作得很好。

下面是我对IE8的这个bug示例:

http://jsfiddle.net/axQTJ/1/

尝试 onfocus="this.style.backgroundColor='#fff';return true;"

这个 return true; 意味着原始事件处理代码应该继续。还可以尝试使用CSS是否可以获得相同的结果。