Use TabIndex Form Field Focus in Specific Container

Using tab index attribute in HTML form fields a user can easily navigate to the next or previous field by merely using the keyboard. But after some presses, Tab index focus caret secretly goes to a new dimension where it becomes impossible to press tab to get back that caret guy in place. ultimately we use to move back caret guy in place.

So during a requirement where I wanted to trap carret guy in a wrapper so that even after continous tabbing caret we never be able to leave that defined wrapper. After defined at input field that will focus on first defined form field automatically.

 

Let’s start implementation

 

Step 1 – Add a sample form. I am adding almost all type of form elements here with a tab index defined. In a form, radio input field behaves differently we can check then by up down arrows only as checked in chrome browser.

 

 

Step 2 – jQuery code having a function in which we can define StartIndex and last index. Following is JS code having self-explanatory comments.

 

 

See working demo here.

The user can use TAB and TAB+Shift operations on form in wrapper defined “dyno-tab-wrap”. TAB focus will jump to first after reaching the lastIndex.

Let me know if any modification or optimization can be done in code. 😃

Leave a Reply

Your email address will not be published. Required fields are marked *