代码之家 › 专栏 › 技术社区 › Tim Büthe

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

internet-explorer css html javascript

Tim Büthe · 技术社区 · 16 年前

我想突出显示一个带有背景色的select元素,它是必需的。当用户通过点击打开菜单时,我想去掉背景色,这样它看起来更漂亮,更可读。这在Firefox、Chrome甚至IE6中都可以正常工作,但在IE7&8中,下拉菜单在第一次单击时不会打开(或者打开和关闭非常快),只有在第二次单击时才会打开。

<select 
    style="background-color: #BDE5F8"
    onfocus="this.style.backgroundColor='#fff'"
    onblur="this.style.backgroundColor='#BDE5F8'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

我怎么修这个?

6 回复 | 直到 13 年前

bobince 16 年前

经过一点测试,在我看来,如果以任何方式修改样式,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]-->

Marco 16 年前

在测试了更多之后,我觉得最好的方法是改变颜色 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事件处理来解决?

否则,我不知道。:)

Francisco Aquino 16 年前

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

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

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

hippyneil 16 年前

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

thetoolman 16 年前

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

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

-1

Aaron Digulla 16 年前

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

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