使用jquery修复ie6/7不支持focus的bug
2012-09-24 10:10
465 查看
我们都知道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>
function changeTsize(){document.getElementById("runcode_pyH_0Y").style.height = document.getElementById("runcode_pyH_0Y").scrollHeight + "px";}window.setTimeout(changeTsize,0);
提示：你可以先修改部分代码再运行。
上例是使用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>
function changeTsize(){document.getElementById("runcode_gSCmWq").style.height = document.getElementById("runcode_gSCmWq").scrollHeight + "px";}window.setTimeout(changeTsize,0);
提示：你可以先修改部分代码再运行。
<!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>
function changeTsize(){document.getElementById("runcode_pyH_0Y").style.height = document.getElementById("runcode_pyH_0Y").scrollHeight + "px";}window.setTimeout(changeTsize,0);
提示：你可以先修改部分代码再运行。
上例是使用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>
function changeTsize(){document.getElementById("runcode_gSCmWq").style.height = document.getElementById("runcode_gSCmWq").scrollHeight + "px";}window.setTimeout(changeTsize,0);
提示：你可以先修改部分代码再运行。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 修复jQuery UI Autocomplete在firefox不支持中文的BUG
- 修复jQuery UI Autocomplete在firefox不支持中文的BUG
- jQuery 1.5.1 发布，全面支持IE9 修复大量bug
- jQuery 1.5.1 发布，全面支持IE9 修复大量bug
- 改进的 CHoverButton 支持focus，四种状态，修复BUG
- jQuery中isFunction方法的BUG修复
- JNotify使用实例与BUG修复
- jquery.validate 1.7版本(remote方法)bug修复方法(一)
- 关于jQuery formValidator升级、修复BUG的申明
- jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器
- Tinymce+jQuery.Validation使用产生的BUG
- 在网页中使用jQuery-qrcode生成二维码以及中文支持解决方案
- [刷机教程] 刷中文recovery V880最简单的刷机教程，更新recovery，修复若干BUG，支持最新ROM
- CodeSmith7代码生成器针对PostgreSQL数据库无法使用的Bug修复全过程
- 【原创】修复ios输入框获取焦点时不支持fixed的bug
- 修复jQuery Autocomplete在FF中不支持中文的BUG
- 修复jquery.cookie的bug,使其能在IE浏览器下正常工作
- jQuery在IE8上使用时提示“对象不支持此属性或方法”
- 云帮社区版4月升级,支持主流Go版本,修复了若干Bug
- jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题