由于需求需要,我要在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
------解决方案--------------------