时间:2021-05-28
tabIndex 的用处很简单,就是利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序。虽然微不足道,但细节处见真功夫,这是任何一个WEB应用应当具备的亲用力,保证用户在没有鼠标的情况下(如WAP)仍然可以正常使用。
下面的例子,为了突现tabIndex控制焦点跳转的能力,特意把顺序打乱了。请先选中第一个文本域,然后按tab键观察。
tabIndex By 司徒正美
根据这篇文章的介绍,W3C DOM与Netscape仅是把tabIndex添加到有限的几个元素上:a, area, button, input, object, select, textarea,也就是所谓的表单元素与链接。IE4则比它多以下元素: applet, body, div, embed, isindex, marquee, span, table, 与td,到了IE5,几乎所有能渲染的元素都拥有这属性(像br元素就是不能渲染的)。tabIndex的值,根据W3C的规定,范围在0到 32767。
在jQuery的源码中,讲到attr部分提供了一条链接,是专门说明如何用javascript设置获取与移除tabIndex属性,不过已有些日子了,许多主流浏览器都更新了版本。因此我再测试了一次。测试程序见下面的运行框:
tabIndex By 司徒正美 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
此表格与《Getting, setting, and removing tabindex values with JavaScript》一文中对应的表格相比,全部为1。
我们再来看当表单元素没有显示地设置tabIndex属性时,tabIndex是否存在,存在的话其默认值是多少。
没有tabIndex的input元素IE6IE7IE8FF3.55opeta10.10Safari4.0chrome4.02el.tabIndex0000000el.getAttribute("tabindex")000nullnullnullnullel.getAttribute("tabIndex")000nullnullnullnull如果测试对象为一个没有显式设置tabIndex属性的div元素呢?在W3C标准中,只有表单元素与链接才能tabIndex属性。
没有tabIndex的div元素IE6IE7IE8FF3.55opeta10.10Safari4.0chrome4.02el.tabIndex000-1-1-1-1el.getAttribute("tabindex")000nullnullnullnullel.getAttribute("tabIndex")000nullnullnullnull我们看这篇文章,标准浏览器的设定其泾渭分明,-1给那些不该拥有它的元素,0是默认分配给那些表单元素与链接,如果用户定义了就返回用户的认定值,即便它是div。
不过在IE中,非表单元素与链接无论tabIndex是否定义都返回0,那么我们怎么知道元素是否已定义过呢?《Getting, setting,……》给出一个非常好的办法。利用getAttributeNode 获取对应的属性节点。在IE中,如果是默认属性或已定义属性,将会返回一个对象,标准浏览器则只有当我们显示地设置这属性时才返回对象,其他一律为null。在IE中,如果是默认属性,没有为其赋值,它有一个特殊的specified ,显示为false,如果赋值了,则为true。标准浏览器没有这东西,也不需要此东西。
再看为没有tabIndex属性元素赋值的情况el.tabIndex=value就不用说了,肯定行得通,dom 0年代的实现。如果一个元素用setAttribute("tabIndex",3)赋值,注意是大写,那么无论是el.tabIndex还是el.getAttribute("tabIndex")还是el.getAttribute("tabindex")都能得到3。如果是setAttribute("tabindex",3)赋值,IE则全为0,标准浏览器则全为3,因此还是用前者吧。
没有tabIndex的input元素IE6IE7IE8FF3.55opeta10.10Safari4.0chrome4.02el.tabIndex=33333333el.setAttribute("tabIndex",3)3333333el.setAttribute("tabindex",3)0003333最后移除属性的情况,移除结果后分别用el.tabIndex,el.getAttribute("tabIndex"),el.getAttribute("tabindex")测试。谁都没有把握移除干净,从目前的情况来看,只有选择el.removeAttribute("tabIndex")。
tabIndex为3的input元素IE6IE7IE8FF3.55opeta10.10Safari4.0chrome4.02el.removeAttribute("tabIndex")0,0,00,0,00,0,00,null,null0,null,null3,null,null3,null,nullel.removeAttribute("tabindex")3,3,33,3,33,3,30,null,null0,null,null3,null,null3,null,nulldelete el.tabIndexerrererrererrer3,3,30,null,null3,3,3undefined,null,null声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
每个JavaScript函数都有prototype属性(javascript对象没有这个属性),这个属性引用了一个对象,这个对象就是原型对象。javascrip
焦点元素到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互让非表单元素获得焦点也是有办法的,先将tabIndex属性设置
一、变量说到javascript中的delete操作符,还是首先要搞清楚javascript中的变量和属性之间的关系。javascript中,变量和对象属性关系
JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性。主要内容如下:理解JavaScript
一、什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的。我们使用pr