JQuery选择框焦点问题在Internet Explorer中 [英] JQuery select box focus problem in internet explorer

问题描述

在下面的.input匹配一个标签。

这个代码在所有浏览器中都能正常工作，除了在Internet Explorer中，我需要点击一个选择框两次来获得下拉菜单。

  $（。input）。focus（function（）{
 var rc = $（this）。 （。rc-input）; 
 rc.removeClass（rc-input-default）; 
 rc.addClass（rc-input-active）; 
}） ; 
  

如果我使用mousedown而不是焦点，它可以工作，但是我没有得到期望的效果tabbing？

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

解决方案

这是IE中的一个错误。在版本8之前，如果对IE中的选择框进行更改（包括通过更改类名称进行间接样式更改），则会重新创建基础Windows下拉窗口小部件，该窗口小部件具有将其重置为关闭状态的副作用。

在IE6-7上，作为解决方法，您可以使用 onfocusin 而不是 onfocus ;因为这发生在选择集中之前，重新设置不会关闭该控件。或者只是简单地使用一个简单的CSS ：focus 规则而不是改变类别，让IE6-7用户放弃输入高亮。 （他们不值得漂亮！）

见

In the following ".input" matches with a tag.

The code works fine in all browser except in internet explorer where I need to click on a select box twice to get the dropdown.

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

If I use mousedown instead of focus it work, but the I don't get the desired effect when tabbing?

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

解决方案

It's a bug in IE. When you make any change to a select box in IE prior to version 8 (including indirect style changes via changing class names) it recreates the underlying Windows dropdown widget, which has the side-effect of resetting it to a closed state.

On IE6-7, as a workaround, you can use onfocusin instead of onfocus; as this happens before the select is focused, the restyling doesn't close the control. Or just use a simple CSS :focus rule in preference to class-changing, and let IE6-7 users forgo the input highlighting. (They don't deserve the pretties!)

See this answer for example code combining these approaches.

这篇关于JQuery选择框焦点问题在Internet Explorer中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！