• div标签别样的属性——tabindex

       今天做开发遇到一个问题，经过努力还是解决了，这次让我认识了div中一个新的属性tabindex，下面结合例子谈一下该属性的作用：

            代码1：

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>01</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <div οnfοcus="javascript:alert('得到焦点!');" style="border:1px solid #ccc;200px;height:200px;"> </div>
    8.  
      </body>
    9.  
      </html>
            说明：当你通过点击div区域试图使div区域获取焦点时，div的onfocus函数并不能触发，这种情况下如果div有onblur事件也是不能触发的；

            代码2：

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>02</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <div tabindex="0" οnfοcus='alert("得到焦点!");' style="border:1px solid #ccc;200px;height:200px;"> </div>
    8.  
      </body>
    9.  
      </html>
            说明：当你通过点击div区域试图使div区域获取焦点时，div的onfocus函数就会触发，这种情况下如果div有onblur事件也可以触发；

            总结：如果试图触发div标签绑定的onfocus事件和onblur事件，需要为该标签添加tabindex属性。

            为什么试图触发div标签绑定的onfocus事件和onblur事件，需要为该标签添加tabindex属性呢？

            代码3：

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>03</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <input type="text" id="text1" id="text1" >   <input type="text" id="text2" id="text2" >
    8.  
      </body>
    9.  
      </html>
            说明：使用浏览器运行上面代码后，请点击计算机“Tab”键，这是你会发现input控件获取了焦点；input控件可以直接触发onfocus事件和onblur事件，但div不行，这是怎么回事儿呢？呵呵呵，只能有一种情况div标签默认没有tabindex属性——tab键进行移动光标的时候，光标只在具有tabindex属性的元素上进行跳转。
            什么是tabindex，其值代表着什么意思？

            说明：tabindex属性其实指定了点击计算机“Tab”键时光标移动的顺序，在点击计算机“Tab”键时tabindex属性值越小（最小为0）其所在的标签越先得到焦点：看下面两个代码：

            代码4：

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>04</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <input type="text" id="text1" id="text1" tabindex = "0">   
    8.  
      <input type="text" id="text2" id="text2" tabindex = "0">   
    9.  
      <input type="text" id="text3" id="text3" tabindex = "0">
    10.  
      </body>
    11.  
      </html>
            说明：在点击计算机“Tab”键时你会看到上面控件获取焦点的顺序依次自左向右；

            代码5：

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>05</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <input type="text" id="text1" id="text1" tabindex = "3">   
    8.  
      <input type="text" id="text2" id="text2" tabindex = "2">   
    9.  
      <input type="text" id="text3" id="text3" tabindex = "1">
    10.  
      </body>
    11.  
      </html>
            说明：在点击计算机“Tab”键时你会看到上面控件获取焦点的顺序依次自右向左；

            总结：通过代码4和代码5我们可以充分的认识到：在点击计算机“Tab”键时tabindex属性值越小（最小为0）其所在的标签越先得到焦点。

            使用tabindex注意点：

            代码6：

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>06</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <div tabindex="2" style="border:1px solid #ccc;200px;height:200px;"> </div>
    8.  
      <br>
    9.  
      <div tabindex="1" style="border:1px solid #ccc;200px;height:200px;"> </div>
    10.  
      </body>
    11.  
      </html>
    图6-1
     
    图6-2

            说明：上图中的两个div都添加了tabindex属性，由于第二个div的tabindex属性值比第一个div的tabindex属性值小，所以在点击计算机“Tab”键时第二个div首先获取焦点，可是你留意了吗——获取焦点的div在谷歌浏览器中会出现一个浅蓝色的“框”，在IE浏览器中会出现一个由虚线构成的“框”，这和我们原来的框是不一样的，那么怎么解决这个问题呢？解决出现浅蓝“框”只需要向div标签的样式表中添加“outline:0;”样式即可，解决出现由虚线构成的“框”只需要向div标签中添加“hidefocus="true"”属性和属性值即可；

            代码7:

            

    1.  
      <html>
    2.  
      <head>
    3.  
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    4.  
      <title>07</title>
    5.  
      </head>
    6.  
      <body>
    7.  
      <div tabindex="0" οnfοcus="javascript:alert('得到焦点!');" style="border:1px solid #ccc;200px;height:200px;outline:0;"> </div>
    8.  
      </body>
    9.  
      </html>
            说明：使用IE、火狐或Opera浏览器运行代码7的代码，让div获取焦点（通过鼠标点击div域即可）你会发现出现了一个对话框，点击“确定”按钮，该对话框取消，但是在谷歌或Safari浏览器运行代码7的代码，让div获取焦点（通过鼠标点击div域即可）点击出现的对话框中的“确定”按钮，你会发现该对话框会一次又一次的出现，这不是我们想要看到的，为什么会出现这种情况，怎么解决这种情况呢？呵呵呵，我也正在为此而探索，但到现在也没有找到一个有效的办法，最后迫不得已使用了onclick事件 ，div支持onclick事件的而且不需要添加原本不属于div的tabindex属性。
  • 相关阅读:
    JavaScript 获取Select标签选中的项
    ThinkPHP框架学习记录
    .Net踩坑记录
    Java环境配置出现的问题及解决办法
    const 限定符
    利用python进行数据分析-第八章笔记
    利用python进行数据分析-第七章笔记
    利用python进行数据分析-第六章笔记
    利用python进行数据分析-第五章笔记
    利用python进行数据分析-第三章笔记
  • 原文地址：https://www.cnblogs.com/onesea/p/13704746.html
Copyright © 2020-2023  润新知