前天我写了一篇《
JS 获取当前焦点控件(元素)》的文章，无意中发现在实现这方面的特效使用
JQuery框架更简单。现在我就说一下有关
JQuery实现让元素获取焦点效果吧！
一般而言，只有表单元素与链接才能使用focus与blur事件，因此jQuery对于许多元素就歇菜了。但只要为元素节点设置一个tabindex属性，非表单元素也可能使用这两种事件。
但默认能使用焦点事件的元素一般也支持tabindex事件。为什么这么说呢？因为实质上，默认支持焦点事件的元素并不只这些，IE还默认body, frame, iframe, img, isIndex, object具有获取失去焦点的能力。对于其他标准浏览器，它们之间还可能存在差异。因此我们不能单纯地通过排除法，为非焦点元素添加tabindex属性。而是转而用一种更好的方法，通过检测当前元素是否已经（显式地或隐式地）设置了该属性，才做进一步的操作。如下是检测函数：
|
脚本代码引用片段：
var hasAttr = function(el, name){
var attr = el.getAttributeNode && el.getAttributeNode(name);
return attr ? attr.specified : false
}
|
如果返回值为false，我们就为该元素设置tabindex属性。对于tabindex属性，w3c对此也作出相应现范。如果tabindex为负数，那么元素就不能使用tab键进行导航，但还能获得焦点。如果位于 0 到 32767之间，则可以根据tabindex的值进行导航。如果当几个元素的tabindex同为零时，则以文档流的顺序执行导航。更多与tabindex相关的资料，可以参看我的另一篇文章。
通过上面的分析，无疑将tabindex设为负数最安全，这样就不会破坏原有的tab导航系统。顺便一提，获得焦点后，元素有一个虚线框，总有人挖空心思把它去掉。其实这无疑是对页面易用性的践踏，我们还要考虑一下某些特殊人群的需要，如不用鼠标的高手，鼠标坏了的可怜人或是视力有缺陷的人群。有文章介绍，去掉虚线框在美国是违法的，这是对视力障碍者的一种歧视！
下面给出完整的程序：
|
让元素获取焦点代码引用片段：
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>让元素获取焦点</title>
<script type="text/javascript">
window.onload = function(){
var hasAttr = function(el, name){
var attr = el.getAttributeNode && el.getAttributeNode(name);
return attr ? attr.specified : false
}
var addEvent = function(obj,type,callback){
if ( obj.addEventListener ) {
obj.addEventListener( type, callback, false );
} else if ( obj.attachEvent ) {
obj.attachEvent( "on" + type, callback );
}
}
var focus = function(el,fn){
if(!hasAttr(el,"tabindex"))
el.tabIndex = -1;
addEvent(el,"focus",function(e){
fn.call(el,(e || window.event));
});
}
focus(document.getElementById("aaa"),function(e){
alert(e.type)
alert(this.innerHTML)
});
}
</script>
<style type="text/css">
body {
padding:20px 100px;
}
a{
color:#FFDEAD;
}
#aaa {
padding:10px;
width: 100px;
height: 100px;
background:#4DC2F2;
color:#FF8C00;
font-weight:bolder;
}
</style>
</head>
<body>
<h1><a href="http://www.lezhu99.com">让元素获取焦点</a></h1>
<div id="aaa" >
JQuery让元素获取焦点
</div>
</body>
</html>
|
上面的案例是正常的，你可以把它保存到HTML文件中，然后浏览查看效果！好了！这篇JQuery实现让元素获取焦点效果就到这里吧！我们下次再见！