Getting, setting, and removing tabindex values with JavaScript_getting-setting-and-removing-tabindex-values-with--优快云博客

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: