Tab index to jump between only 2 text boxes

Question

I have a variety of elements on my page, however I want only the 2 textboxes to be accessed by pressing tab, and continually pressing tab to go back and forth between them. What is the best way to achieve this?

Some relevant code below:

<input id="messageBox" placeholder="Type your message here... " tabindex="1" autocomplete="off" /> 
<input id="guessBox" placeholder="Type your guess here..." tabindex="2" autocomplete="off" />

<button id="btnRankUp">Rank Up</button>
<button id="btnHint">Hint</button>
<div id="audioControl">Volume:</div>
<input id="vol-control" type="range" min="0" max="100" step="1" />
<button id="btnMute">Mute</button>

Check this question once: https://stackoverflow.com/questions/14314659/how-to-repeat-the-tabindex-from-1-after-it-has-gone-to-the-last-element-with-a-t — Abhishek Jain, Feb 02 '18 at 10:25
Or maybe buttons are meant to be clicked, and textboxes are meant to be typed in, so to prevent users from taking their hands off their keyboards to change between the 2 textboxes, I can get this tab index to work. When the users need to click a button, they can do it by putting their hand off the keyboard, and onto the mouse. Please do not make pointless comments on my questions, thank you :) — EGxo, Feb 02 '18 at 10:42
Possible duplicate of [tabindex between 2 form elements ONLY](https://stackoverflow.com/questions/24433638/tabindex-between-2-form-elements-only) — Nisarg Shah, Apr 17 '18 at 09:10

score 0 · Answer 1 · answered Feb 02 '18 at 11:53

Listen for TAB press on the second button and focus the first element on this event.

var first = document.getElementById('guessBox'),
    second = document.getElementById('messageBox')

first.onkeydown = function(e) {
  if (e.keyCode === 9) { // the keycode for TAB is 9
    second.focus()
    e.preventDefault()
  }
}

<input id="messageBox" placeholder="Type your message here... " tabindex=0 autocomplete="off" />
<input id="guessBox" placeholder="Type your guess here..." autocomplete="off" />

<button id="btnRankUp">Rank Up</button>
<button id="btnHint">Hint</button>
<div id="audioControl">Volume:</div>
<input id="vol-control" type="range" min="0" max="100" step="1" />
<button id="btnMute">Mute</button>

Play with it here: https://jsfiddle.net/m6btzgpy/

(I'm not sure why tabindex=1 doesn't make the element first in the tab order but it works with 0)

Dzianis Talkachou · Answer 2 · 2021-02-02T12:19:03.797

For the rest of the elements, you need to set tabindex="-1" for other (unavailable to switch) elements.

HTML only solution:

<input id="messageBox" placeholder="Type your message here... " autocomplete="off" /> 
<input id="guessBox" placeholder="Type your guess here..." autocomplete="off" />

<button id="btnRankUp" tabindex="-1">Rank Up</button>
<button id="btnHint" tabindex="-1">Hint</button>
<div id="audioControl" tabindex="-1">Volume:</div>
<input id="vol-control" type="range" min="0" max="100" step="1" tabindex="-1" />
<button id="btnMute" tabindex="-1">Mute</button>

But you can also handle this with JS. You just need to set the same tabindex="-1" for all not input parent's children.

Source: How to ignore HTML element from tabindex?

Tab index to jump between only 2 text boxes

2 Answers2