Getting, setting, and removing tabindex values with JavaScript

最新推荐文章于 2025-11-28 04:56:28 发布

转载最新推荐文章于 2025-11-28 04:56:28 发布 · 815 阅读

文章标签：

#javascript #safari #xhtml #opera #internet #firefox

javascript 专栏收录该内容

125 篇文章

订阅专栏

本文详细介绍了使用JavaScript获取、设置和移除HTML及XHTML文档中元素的tabIndex值的方法。包括不同浏览器之间的兼容性问题，如IE、Firefox、Safari和Opera等。

Getting, setting, and removing tabindex values with JavaScript

Jan 9th, 2008 by simon

I recently implemented some functions for Dojo for getting, setting, and removing tabindex values. It’s not entirely straightforward — here’s what I found out:

Browsers tested

Internet Explorer 6 on Windows XP
Internet Explorer 7 on Windows XP
Firefox 2 on Windows XP
Firefox 3 beta3pre (the Minefield nightly build of 2008-01-07) on Windows XP
Safari 3.0.4 on Mac OS X 10.5.1
Opera 9.25 on Windows XP

Getting the tabindex value from an element

Element.tabIndex and Element.getAttribute("tabindex") can be used to get the tabindex value on both HTML and XHTML documents:

input with tabindex=”1″	IE6 IE7	FF2 FF3 HTML	Safari 3 HTML	Opera 9 HTML	FF2 FF3 XHTML	Safari 3 XHTML	Opera 9 XHTML
elem.tabIndex	1	1	1	1	1	1	1
elem.getAttribute(”tabindex”)	1	1	1	1	1	1	1
elem.getAttribute(”tabIndex”)	1	1	1	1	null	null	null

Element.getAttribute("tabIndex") can be used to get the value on HTML documents. However, Firefox, Safari, and Opera treat XHTML documents case-sensitively and, when used on an XHTML document,Element.getAttribute("tabIndex") will return null.

Getting the tabindex value on an element that doesn’t have one explicitly set

On elements allowed to have tabindex attributes in HTML4 , the tabIndex property defaults to 0 when no tabindex has been explicitly set:

input with no tabindex	IE6 IE7	FF2 FF3	Safari 3	Opera 9
elem.tabIndex	0	0	0	0

On elements not allowed to have tabindex attributes in HTML4 (but supported by IE and Firefox and the upcoming HTML5), the tabIndex property defaults to 0 on Internet Explorer, -1 on Firefox, and undefined on Safari 3 and Opera 9:

div with no tabindex	IE6 IE7	FF2 FF3	Safari 3	Opera 9
elem.tabIndex	0	-1	undefined	undefined

On Internet Explorer, Element.getAttribute("tabindex") returns 0 on elements that have no tabindex value explicitly set. The other browsers return null:

div with no tabindex	IE6 IE7	FF2 FF3	Safari 3	Opera 9
elem.getAttribute(”tabindex”)	0	null	null	null

Testing if tabindex has been set on an element

On Internet Explorer we can’t use Element.getAttribute("tabindex") to determine if a tabindex has been specified on an element because it returns 0 even when one hasn’t been. IE also doesn’t implementElement.hasAttribute() . However, IE6 and IE7 do implement Element.getAttributeNode() and we can use that (Element.getAttributeNode() is also available on Firefox, Safari, and Opera.) When it is called on Internet Explorer on an element with no tabindex value set, Element.getAttributeNode() will return a node whosespecified property is false. When called on Firefox, Safari, and Opera it will return null . For cross-browser compatibility, we can use a test like this:

var attr = elem.getAttributeNode("tabindex");

return attr ? attr.specified : false;

Setting the tabindex value on an element

Element.setAttribute("tabIndex") must be used on Internet Explorer. Either “tabindex” or “tabIndex” can be used for HTML on Firefox, Safari, and Opera, but “tabindex” must be used for XHTML:

input element	IE6 IE7	FF2 FF3 HTML	Safari 3 HTML	Opera 9 HTML	FF2 FF3 XHTML	Safari 3 XHTML	Opera 9 XHTML
elem.setAttribute(”tabindex”)	N	Y	Y	Y	Y	Y	Y
elem.setAttribute(”tabIndex”)	Y	Y	Y	Y	N	N	N

Removing the tabindex value from an element

Like setAttribute() , Element.removeAttribute(”tabIndex”) must be used on Internet Explorer and either “tabindex” or “tabIndex” can be used for HTML on Firefox, Safari, and Opera. “tabindex” must be used for XHTML: