IE浏览器中的JQuery选择框焦点问题

Question

下面的“.input”与标签匹配。

该代码在所有浏览器中都可以正常工作，但在 Internet Explorer 中，我需要单击选择框两次才能获得下拉菜单。

$(".input").focus(function () {
var rc = $(this).parents(".rc-input");
rc.removeClass("rc-input-default");
rc.addClass("rc-input-active");
});

如果我使用 mousedown 而不是 focus，它可以工作，但是在 Tab 键切换时我没有获得所需的效果？

<div class="rc-input">
   <select class="input">
   ...
   </select>
</div>

Answer 1

这是 IE 中的一个错误。当您在版本 8 之前的 IE 中对选择框进行任何更改(包括通过更改类名进行间接样式更改)时，它会重新创建底层 Windows 下拉小部件，这会产生将其重置为关闭状态的副作用。

在 IE6-7 上，作为解决方法，您可以使用 onfocusin 而不是 onfocus；由于这种情况发生在选择聚焦之前，因此重新设计样式不会关闭控件。或者只使用简单的 CSS :focus 规则而不是类更改，让 IE6-7 用户放弃输入突出显示。 (他们不值得拥有美丽!)

参见this answer例如结合这些方法的代码。