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

zoukankan html css js c++ java

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

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

<!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> <style type="text/css"> .txt:focus{ border:1px orange solid;} </style> </head> <body><label> <input type="text" name="" class="txt" /></label><input type="submit" value="百度一下" /><br /> </body> </html>

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

上例是使用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>

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

查看全文

相关阅读:
Git 使用juju
svn Q&A
ubuntu 常用命令
 java中set的交集、差集、并集的简单实现
 java 读写JSON（一）
java类型转化之SimpleDateFormat-时间转化
 maven 基本常识以及命令
 maven遇到的问题
 java编程思想，对象导论
 条目5：避免创建不必要的对象

原文地址：https://www.cnblogs.com/zgqys1980/p/2699646.html