[转载]让元素获得焦点

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_30247159

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量40

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yurukai/archive/2010/05/06/1729186.html

版权

一般而言，只有表单元素与链接才能使用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导航系统。顺便一提，获得焦点后，元素有一个虚线框，总有人挖空心思把它去掉。其实这无疑是对页面易用性的践踏，我们还要考虑一下某些特殊人群的需要，如不用鼠标的高手，鼠标坏了的可怜人或是视力有缺陷的人群。有文章介绍，去掉虚线框在美国是违法的，这是对视力障碍者的一种歧视！

下面给出完整的程序：

 
    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)); 
 
      }); 
 
    }

<!doctype html><html lang="zh-ch"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>让元素获取焦点 by 司徒正美</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.cnblogs.com/rubylouvre/archive/2010/05/03/1726334.html">让元素获取焦点</a></h1> <div id="aaa" > 让元素获取焦点 </div> </body></html>

运行代码

Tag标签: javascript

司徒正美
关注 - 30
粉丝 - 85

转载于:https://www.cnblogs.com/yurukai/archive/2010/05/06/1729186.html

weixin_30247159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转载]让元素获得焦点

一般而言，只有表单元素与链接才能使用focus与blur事件，因此jQuery对于许多元素就歇菜了。但只要为元素节点设置一个tabindex属性，非表单元素也可能使用这两种事件。但默认能使用焦点事件的元素一般也支持tabindex事件。为什么这么说呢？因为实质上，默认支持焦点事件的元素并不只这些，IE还默认body, frame, iframe, img, isIndex, object具...
复制链接

扫一扫