使用jquery修复ie6/7不支持focus的bug

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30546933

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zgqys1980/archive/2012/09/24/2699646.html

本文详细介绍了如何使用jQuery使IE6和IE7支持:focus伪类，通过实例演示解决浏览器兼容性问题，提升用户体验。

我们都知道ie6是不支持focus这个伪类的，我倒是没有注意ie7今天我测试了一下好像ie7也是不支持的。当然并不是ie的所有版本都不支持，ie8是支持的！大家都见到过就是就是当你的鼠标光标聚焦到一个输入框的时候，输入框的边框颜色有所改变。这个效果就是用伪类:focus实现的。但是由于ie6和ie7的不支持所以这个属性很少被使用，他的作用主要是增加用户体验。那么今天我们就来讲解怎么用jquery是ie6和ie7也支持它。还是像往常一样我给出运行的例子，因为我感觉光说别人是不一定能够理解的，但是你要是给他看活生生的例子就不同了。

提示：你可以先修改部分代码再运行。

上例是使用css没有使用jquery的例子你可以在不同浏览器下运行看看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用jquery修复ie6/7不支持focus的bug</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".txt").focus(function(){ $(this).css("border","1px orange solid"); }); $(".txt").blur(function(){ $(this).css("border","1px #999 solid"); }); }) </script> <style type="text/css"> .txt:focus{ border:1px orange solid;} a:focus{ color:red;} </style> </head> <body><label> <input type="text" name="" class="txt" /></label><input type="submit" value="百度一下" /><br /> </body> </html>

提示：你可以先修改部分代码再运行。

转载于:https://www.cnblogs.com/zgqys1980/archive/2012/09/24/2699646.html