日期:2014-05-16  浏览次数:20454 次

IE6下,javascript控制input获取焦点时突出显示,异常
本帖最后由 winkyyue 于 2013-06-20 15:21:34 编辑
由于需求需要,我要在IE6中实现input text输入框的获取焦点突出效果。
在IE6中不支持伪元素,所以我只能通过jquery定义focus事件和blur事件来达到效果。
我在focus中用addClass,blur中用了removeClass,照理说很简单的两句,并且另行在火狐,谷歌的浏览器中测试也都正常。
但是在IE6中,就是无法removeClass.不知道是什么引起的,请诸位帮忙看看了。
这是一开始,光标在第一个输入框:


当我移动光标到下一个输入框,然后到最后一个:

可以看到,当输入框失去焦点,周围的border仍然存在。

代码如下:
JavaScript:
$().ready(function(){
if($.browser.msie){
var ie = $.browser.version;
if(ie=="6.0"){
$("input").each(function(){
$(this).focus(function(){
$(this).addClass("inputFocusIE");
});
$(this).blur(function(){
$(this).removeClass("inputFocusIE");
});
});
}
}
});


css:
.inputFocusIE{
border:expression( (this.type=="text" ||this.type=="password") ?"1px solid rgb(250,210,20)" :"none");
}


再此,我将我调试的过程简单的说一下:
1.我在blur事件中增加过输出,得到的结果是blur能事件正常触发。
2.我在blur事件中尝试过不removeClass,而是更改掉border的颜色。这个可以成功,但是,新的问题是,当重新获取焦点的时候,就addClass不上了。
3.同样的,不是改border颜色,而设border为none,也是再也addClass不上了,不过关于这点,我见过有人说IE6下的border设为none之后,的确是无法在设值了。


我在网上搜素过,对于这个IE6下获取焦点突出显示的问题,大部分是用focus和blur事件来做的,但实在没见过有人说这个removeClass跟IE6不兼容的。实在奇怪,望高手指点。
JavaScript IE6 CSS

------解决方案--------------------
引用:
Quote: 引用:

Quote: 引用:

expression( (this.type=="text" 
------解决方案--------------------
this.type=="password") ?"1px solid rgb(250,210,20)" :"none");
}

这表达式的问题,IE6好像地这种写法是不兼容的,我记得好像是这个表达式比较耗资源,有时候可以,有时候不可以,不稳定。建议还是分开写!不要用这种表达式的形式!


求指教!!
Ie6不支持对input type的选择器啊
input[type='text']
$(':text')
这两种都IE6里都不支持。那要怎么办啊?