韩国福利视频2828网

当前位置:美女AV > Web开发 > jQuery > 正文  |  快速导航:ASP PHP JSP ASP.NET JavaScript JQuery Extjs Ajax Silverlight Flex WebService WCF prototype mootools Dojo
  • JQuery实现让元素获取焦点效果

  • 字号:[ ]2012-11-23 13:06:59  阅读:3930次  来源:乐猪网  编辑:银河精灵  收藏
  • 摘要:一般而言,只有表单元素与链接才能使用focus与blur事件,因此jQuery对于许多元素就歇菜了。但只要为元素节点设置一个tabindex属性,非表单元素也可能使用这两种事件。
  •       前天我写了一篇《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://msoo172.cn">让元素获取焦点</a></h1>
        <div id="aaa" >
          JQuery让元素获取焦点
        </div>
      </body>
    </html>

     

          上面的案例是正常的,你可以把它保存到HTML文件中,然后浏览查看效果!好了!这篇JQuery实现让元素获取焦点效果就到这里吧!我们下次再见!

     

     

  • 顶一下
    (0)
    0%
    踩一下
    (0)
    0%
乐猪网 版权所有 Copyright © 2012-2015 msoo172.cn All rights reserved.
本站用于学习交流,部分文章来源于网络,如果不慎侵犯了您的权益,请AV视频 我们删除!
粤ICP备12000837号

韩国福利视频2828网