tabindex
is an HTML core global attribute.
With it you can control in what order the elements get the focus, when the user presses the TAB
key.
You can also prevent an element to gain focus through the TAB
key.
Typical example:
- We have a login form
- The username field takes the autofocus
- Hitting TAB will put the focus in password field
- Hitting TAB again will focus the login button, skipping the reset password link
<form method='post'>
<input type='text' name='username' tabindex='1' autofocus />
<input type='password' name='password' tabindex='2' />
<a href='#' tabindex='4'>reset password</a>
<button tabindex='3'>Log in</button>
</form>
To prevent an element to gain focus when hitting TAB
, give tabindex
a value of -1
.