div标签别样的属性—

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

代码1：

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>01</title></head><body><div onfocus="javascript:alert('得到焦点!');" style="border:1px solid #ccc;width:200px;height:200px;"> </div></body>
</html>

说明：当你通过点击div区域试图使div区域获取焦点时，div的onfocus函数并不能触发，这种情况下如果div有onblur事件也是不能触发的；

代码2：

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>02</title></head><body><div tabindex="0" onfocus='alert("得到焦点!");' style="border:1px solid #ccc;width:200px;height:200px;"> </div></body>
</html>

说明：当你通过点击div区域试图使div区域获取焦点时，div的onfocus函数就会触发，这种情况下如果div有onblur事件也可以触发；

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

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

代码3：

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>03</title></head><body><input type="text" id="text1" id="text1" >   <input type="text" id="text2" id="text2" ></body>
</html>

说明：使用浏览器运行上面代码后，请点击计算机“Tab”键，这是你会发现input控件获取了焦点；input控件可以直接触发onfocus事件和onblur事件，但div不行，这是怎么回事儿呢？呵呵呵，只能有一种情况div标签默认没有tabindex属性——tab键进行移动光标的时候，光标只在具有tabindex属性的元素上进行跳转。
什么是tabindex，其值代表着什么意思？

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

代码4：

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>04</title></head><body><input type="text" id="text1" id="text1" tabindex = "0">   <input type="text" id="text2" id="text2" tabindex = "0">   <input type="text" id="text3" id="text3" tabindex = "0"></body>
</html>

说明：在点击计算机“Tab”键时你会看到上面控件获取焦点的顺序依次自左向右；

代码5：

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>05</title></head><body><input type="text" id="text1" id="text1" tabindex = "3">   <input type="text" id="text2" id="text2" tabindex = "2">   <input type="text" id="text3" id="text3" tabindex = "1"></body>
</html>

说明：在点击计算机“Tab”键时你会看到上面控件获取焦点的顺序依次自右向左；

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

使用tabindex注意点：

代码6：

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>06</title></head><body><div tabindex="2" style="border:1px solid #ccc;width:200px;height:200px;"> </div><br><div tabindex="1" style="border:1px solid #ccc;width:200px;height:200px;"> </div></body>
</html>

图6-1

图6-2

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

代码7:

<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>07</title></head><body><div tabindex="0" onfocus="javascript:alert('得到焦点!');" style="border:1px solid #ccc;width:200px;height:200px;outline:0;"> </div></body>
</html>

说明：使用IE、火狐或Opera浏览器运行代码7的代码，让div获取焦点（通过鼠标点击div域即可）你会发现出现了一个对话框，点击“确定”按钮，该对话框取消，但是在谷歌或Safari浏览器运行代码7的代码，让div获取焦点（通过鼠标点击div域即可）点击出现的对话框中的“确定”按钮，你会发现该对话框会一次又一次的出现，这不是我们想要看到的，为什么会出现这种情况，怎么解决这种情况呢？呵呵呵，我也正在为此而探索，但到现在也没有找到一个有效的办法，最后迫不得已使用了onclick事件，div支持onclick事件的而且不需要添加原本不属于div的tabindex属性。

div标签别样的属性——tabindex相关推荐

html div标签的 class属性是干嘛用的？
参考文章:https://zhidao.baidu.com/question/120064132.html
div 属性 DIV标签属性有什么如何设置属性
div 属性介绍,对DIV可加属性有哪些,DIV属性一览表DIVCSS5整理 DIVCSS5给大家整理DIV标签内常用属性,同时通过div各属性小实例,让大家认识各属性并掌握属性. div标签内常用属 ...
easyui 如何为标签动态追加属性实现渲染效果
简述一下在项目遇到的问题,这边有一个需求,选择不同类型,加载不同的div标签(其中属性是否必填是区分类型的关键) html界面是这样的 <div class="grid_1 lbl&q ...
div html用法详解,div标签详解
html中div标签怎么用? 就把DIV看成一个纯净的箱子吧.啥属性都没有默认宽度100% 高度0 高度是按DIV里的内容而变高也可以在 CSS里设置宽高 DIV就是典型的标签.. ...
什么是 HTML div标签以及如何使用 CSS 设置样式
HTML 分割标记,简称为"div",是一种特殊元素,可让您在网页上将相似的内容集组合在一起.您可以将其用作关联相似内容的通用容器. 标签是最常用的div标签之一,尽管引入了语义元 ...
java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
＜nav＞导航标签和div标签一样，块属性标签＜/nav＞＜main＞内容区域，和section没有区别＜/main＞＜section＞内容区域，和main没有区别＜/sect
<nav>导航标签和div标签一样,块属性标签</nav> <main>内容区域,和section没有区别</main> <se ...
html div标签属性教程,前端基础之DIV标签讲解！
摘要: DIV标签,称为区隔标记.作用是设定字.画.表格等的摆放位置.当你把文字.图象,或其他的放在 DIV 中,它可称作为"DIV block",或"DIV eleme ...
对于html中div标签height属性的个人理解
对于没有系统学习过css的程序员来说,在编写css样式的时候,div的height属性值确实是个玄学的东西,我也感觉css确实挺玄学的,本文将介绍我对div标签height属性的个人理解,如有问题 ...

div标签别样的属性——tabindex

div标签别样的属性——tabindex相关推荐

最新文章

热门文章