html： tab键导航控制属性tabindex

一：

原文地址：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:

• a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
• 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
• a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.

An element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order.

 

二、

原文地址：http://stackoverflow.com/questions/4112289/what-is-the-html-tabindex-attribute

tabindex is global attribute responsible for two things:

1. it sets the order of "focusable" elements and
2. it makes element "focusable'.

To my mind the second thing is even more important then the first one. There are very few elements that are focusable by default (e.g. <a> and form controls). Developers very often add some JavaScript event handlers (like 'onclick') on not focusable elements (<div>, <span> and so on). And the way to make your interface to be responsive not only to mouse events but to keyboard events (e.g. 'onkeypress') as well is making such elements focusable. And in the last case if you don't want to set the order but just make your element focusable use tabindex="0" on all such elements:

<div tabindex="0"></div>

Also if you don't want it to be focused then use tabindex="-1". For example the below link will not be focused while using tab keys to traverse.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>