Landed cross-browser support for tabIndex, by Scott, closes ticket #3649.

This commit is contained in:
John Resig 2009-01-05 17:34:42 +00:00
parent 42c99472cc
commit 122b672f70
5 changed files with 84 additions and 2 deletions

View file

@ -970,6 +970,13 @@ jQuery.extend({
if( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) ) if( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) )
return elem.getAttributeNode( name ).nodeValue; return elem.getAttributeNode( name ).nodeValue;
// elem.tabindex doesn't always return the correct value
// http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
if ( name == jQuery.props.tabindex ) {
var attributeNode = elem.getAttributeNode(jQuery.props.tabindex);
return attributeNode && attributeNode.specified && attributeNode.value || undefined;
}
return elem[ name ]; return elem[ name ];
} }

View file

@ -51,6 +51,10 @@
// (IE uses styleFloat instead of cssFloat) // (IE uses styleFloat instead of cssFloat)
cssFloat: !!a.style.cssFloat, cssFloat: !!a.style.cssFloat,
// Verify tabindex attribute existence
// (IE uses tabIndex instead of tabindex)
tabindex: !a.getAttributeNode('tabindex'),
// Will be defined later // Will be defined later
scriptEval: false, scriptEval: false,
noCloneEvent: true noCloneEvent: true
@ -96,5 +100,6 @@ jQuery.props = {
readonly: "readOnly", readonly: "readOnly",
maxlength: "maxLength", maxlength: "maxLength",
cellspacing: "cellSpacing", cellspacing: "cellSpacing",
rowspan: "rowSpan" rowspan: "rowSpan",
tabindex: jQuery.support.tabindex ? "tabindex" : "tabIndex"
}; };

View file

@ -195,6 +195,20 @@ Z</textarea>
<div><div class="hidden">hidden</div></div> <div><div class="hidden">hidden</div></div>
</div> </div>
</div> </div>
<div id="tabindex-tests">
<ol id="listWithTabIndex" tabindex="0">
<li id="foodWithNegativeTabIndex" tabindex="-1">Rice</li>
<li id="foodNoTabIndex">Beans</li>
<li>Blinis</li>
<li>Tofu</li>
</ol>
<div id="divWithNoTabIndex">I'm hungry. I should...</div>
<span>...</span><a href="#" id="linkWithNoTabIndex">Eat lots of food</a><span>...</span> |
<span>...</span><a href="#" id="linkWithTabIndex" tabindex="2">Eat a little food</a><span>...</span> |
<span>...</span><a href="#" id="linkWithNegativeTabIndex" tabindex="-1">Eat no food</a><span>...</span>
</div>
</div> </div>
</dl> </dl>

View file

@ -545,6 +545,62 @@ if ( !isLocal ) {
}); });
} }
test("attr('tabindex')", function() {
expect(5);
// tabindex 0
equals(jQuery('#listWithTabIndex').attr('tabindex'), 0, 'tabindex of 0');
// positive tabindex
equals(jQuery('#linkWithTabIndex').attr('tabindex'), 2, 'tabindex of 2');
// negative tabindex
equals(jQuery('#linkWithNegativeTabIndex').attr('tabindex'), -1, 'negative tabindex');
// regular element without a tabindex
equals(jQuery('#divWithNoTabIndex').attr('tabindex'), undefined, 'no tabindex, not tabbable by default');
// link without a tabindex
equals(jQuery('#linkWithNoTabIndex').attr('tabindex'), undefined, 'no tabindex, tabbable by default');
});
test("attr('tabindex', value)", function() {
expect(9);
var element = jQuery('#divWithNoTabIndex');
equals(element.attr('tabindex'), undefined, 'start with no tabindex');
// set a positive string
element.attr('tabindex', '1');
equals(element.attr('tabindex'), 1, 'set tabindex to 1 (string)');
// set a zero string
element.attr('tabindex', '0');
equals(element.attr('tabindex'), 0, 'set tabindex to 0 (string)');
// set a negative string
element.attr('tabindex', '-1');
equals(element.attr('tabindex'), -1, 'set tabindex to -1 (string)');
// set a positive number
element.attr('tabindex', 1);
equals(element.attr('tabindex'), 1, 'set tabindex to 1 (number)');
// set a zero number
element.attr('tabindex', 0);
equals(element.attr('tabindex'), 0, 'set tabindex to 0 (number)');
// set a negative number
element.attr('tabindex', -1);
equals(element.attr('tabindex'), -1, 'set tabindex to -1 (number)');
element = jQuery('#linkWithTabIndex');
equals(element.attr('tabindex'), 2, 'start with tabindex 2');
element.attr('tabindex', -1);
equals(element.attr('tabindex'), -1, 'set negative tabindex');
});
test("css(String|Hash)", function() { test("css(String|Hash)", function() {
expect(19); expect(19);

View file

@ -235,7 +235,7 @@ test("pseudo (:) selectors", function() {
t( "Selected Option Element", "#form option:selected", ["option1a","option2d","option3b","option3c"] ); t( "Selected Option Element", "#form option:selected", ["option1a","option2d","option3b","option3c"] );
t( "Text Contains", "a:contains('Google')", ["google","groups"] ); t( "Text Contains", "a:contains('Google')", ["google","groups"] );
t( "Text Contains", "a:contains('Google Groups')", ["groups"] ); t( "Text Contains", "a:contains('Google Groups')", ["groups"] );
t( "Element Preceded By", "p ~ div", ["foo","fx-queue","fx-tests", "moretests"] ); t( "Element Preceded By", "p ~ div", ["foo","fx-queue","fx-tests", "moretests","tabindex-tests"] );
t( "Not", "a.blog:not(.link)", ["mark"] ); t( "Not", "a.blog:not(.link)", ["mark"] );
t( "Not - multiple", "#form option:not(:contains('Nothing'),#option1b,:selected)", ["option1c", "option1d", "option2b", "option2c", "option3d", "option3e"] ); t( "Not - multiple", "#form option:not(:contains('Nothing'),#option1b,:selected)", ["option1c", "option1d", "option2b", "option2c", "option3d", "option3e"] );
//t( "Not - complex", "#form option:not([id^='opt']:nth-child(-n+3))", [ "option1a", "option1d", "option2d", "option3d", "option3e"] ); //t( "Not - complex", "#form option:not([id^='opt']:nth-child(-n+3))", [ "option1a", "option1d", "option2d", "option3d", "option3e"] );