Member Avatar for bboyle

When I have a hidden input field on my webpage and I use the tab key to traverse my fields, the cursor always moves to the hidden input field. This means that I have to press tab twice to move to the next visible field. Is there any way that I can skip the hidden input field when I am using the tab key?
Thanks, B.

  • 3 Contributors
  • 2 Replies
  • 293 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by hoffman408

Dani AI

Generated

True hidden fields (the HTML input whose purpose is to carry submitted data) are not focusable — they cannot receive keyboard focus or be reached with Tab. If still lands on a “hidden” control while tabbing, it usually means the control is not a true hidden input or it’s been hidden with a technique that leaves it tabbable; ’s pointer to tabindex and ’s disabled tip are on the right track but need a few modern caveats.

Try this quick troubleshooting checklist:

  • Inspect the element in DevTools and confirm its actual tag/type and any tabindex or script-driven focus calls.
  • See where focus actually goes with the console; document.activeElement reports the currently focused node.
document.activeElement
  • Check how it’s hidden: display:none / visibility:hidden remove it from tab order; off-screen positioning, opacity:0 or some “screen-reader-only” CSS can still leave interactive children reachable. Also beware aria-hidden="true" on a container — that hides from assistive tech but may not stop focusable children unless you also remove their tab stops.

Fixes and tradeoffs

  • If the value must be submitted but should never get focus, use a proper hidden control (the browser won’t tab to it).
  • If you need to remove an interactive control from sequential keyboard navigation but keep it in the DOM, consider making its container inert (removes all children from tab order) or otherwise remove its tab stops; using disabled will also prevent focus but will exclude that control from form submission — so don’t use disabled if you still need the value sent. For group-level hiding, the newer inert approach is the cleanest modern solution.

Practical tip: fix the smallest thing that causes the focus — remove an accidental tabindex, stop a script calling .focus(), or switch the hide technique — then retest with Tab only (and verify with document.activeElement). That usually clears the double-Tab symptom without reordering the whole form.

Recommended Answers

All 2 Replies

Member Avatar for Dani

Sure, just add the "tabindex" parameter to every form field you want the tab key to traverse. For example.

<input type="text" tabindex="0">

Each form field should increment the tabindex (0, 1, 2, ...) in the order you want the tab key to proceed. For elements you don't want the tab key to stop at, set the tabindex to -1.

Member Avatar for hoffman408

Also setting the <input> attribute disabled="disabled" will cause the tab key to skip over this field. For visible fields some browsers will gray out the text and others do not. I have not tried this for hidden fields.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.