scope tab order (tabindex) to specific form

Question

scope tab order (tabindex) to specific form

2.2k views Asked by Brett At 18 September 2024 at 18:59

I have a page with two forms. If the user is tabbing through fields on either form, I would like for the focus to stay on the current form and not jump to the next form.

Specifically, one form is on the page body and the other is in a modal. The problem I'm addressing is that when the user gets to the end of the modal form and continues to press the tab key, focus moves to the form behind the modal mask.

I can think of javascript/jquery solutions to address this, but I'm wondering if I'm missing any native HTML avenues.

Original Q&A

There are 2 answers

**Tim** · Answer 1 · 2013-12-03 13:01:51

Try using something like this:

<html>
<head>
  <title>Controlling TAB Order</title>
</head> 
<body>
  <form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=1 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=2 /><br /> 
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=3 /><br />
  </form>
  <form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=4 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=5 /><br /> 
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=6 /><br />
  </form> 
</body>
</html>

**Alex Botelho** · Answer 2 · 2015-08-18 05:48:17

The answer for your problem is to disable the html elements on the first form, when the modal is displayed. That way, the disabled elements will not participate in the tabbing order.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex

TechQA.

scope tab order (tabindex) to specific form

There are 2 answers

Related Questions in HTML

Related Questions in FORMS

Related Questions in TABINDEX

Popular Questions

Popular Tags

Trending Questions