Creating a Loop for Tabs on an HTML Form

Question

Creating a Loop for Tabs on an HTML Form

When navigating through form input boxes using the tab key, it usually goes in order. However, I discovered that you can actually customize this order by using tabindex=x. Since I have 5 inputs on my form, I use tabindex 5 times to specify the order. But after those 5, the focus moves to other elements on the page. Is there a way to create a loop so that the tab key cycles only through those initial 5 items? Unfortunately, I can't use tabindex=0 because then I'd have to add it to hundreds of other items as well. So, my question is how can I establish a "tab loop" for these specific 5 items?

javascript jquery html css tabs

Answer 1

Answer №1

Tab looping cannot be set up declaratively. This functionality is meant to align with the standard tabbing behavior of the browser, which includes navigating through all tab-able elements on the page and in the browser interface.

If you wish to restrict tabbing from a specific group of elements, JavaScript will be necessary. It's important to understand why this limitation is being imposed, provide clear visual indicators that certain elements are focused over others, and consider users who rely on keyboard navigation without visuals.

If after careful consideration you decide to alter the tabbing sequence, one approach is to create hidden tabbable elements (though still displayed) positioned before and after your target form items. These elements will redirect focus back to the beginning or end of the form as needed.

preFormDummy.addEventListener('focus', function(e){
  lastFormItem.focus() }, true )

postFormDummy.addEventListener('focus', function(e){
  firstFormItem.focus() }, true )

Remember to initially disable these dummy elements and only enable them once the form is accessed, signalling a modal state. Disable them again once the form interaction is complete.

It is crucial to conduct user testing to gauge reactions to this adjusted tabbing behavior. Feedback will reveal if users find it helpful or unsettling due to unexpected changes in tab navigation.

Answer 2

Tab looping cannot be set up declaratively. This functionality is meant to align with the standard tabbing behavior of the browser, which includes navigating through all tab-able elements on the page and in the browser interface.

If you wish to restrict tabbing from a specific group of elements, JavaScript will be necessary. It's important to understand why this limitation is being imposed, provide clear visual indicators that certain elements are focused over others, and consider users who rely on keyboard navigation without visuals.

If after careful consideration you decide to alter the tabbing sequence, one approach is to create hidden tabbable elements (though still displayed) positioned before and after your target form items. These elements will redirect focus back to the beginning or end of the form as needed.

preFormDummy.addEventListener('focus', function(e){
  lastFormItem.focus() }, true )

postFormDummy.addEventListener('focus', function(e){
  firstFormItem.focus() }, true )

Remember to initially disable these dummy elements and only enable them once the form is accessed, signalling a modal state. Disable them again once the form interaction is complete.

It is crucial to conduct user testing to gauge reactions to this adjusted tabbing behavior. Feedback will reveal if users find it helpful or unsettling due to unexpected changes in tab navigation.

Answer 3

Answer №2

After experimenting with jQueryUI, I discovered a simple method to accomplish this task. I established a .tabloop class and implemented the code snippet below.

If you're looking for the :tabbable selector, it's not inherent in jQuery but can be easily created using jQueryUI.

// Focus loop within an element with the tabloop class
$(function() {
  $(document).on('keydown', '.tabloop :tabbable:not([readonly])', function(e) {

    // Only consider Tab key (code 9)
    if (e.keyCode != 9)
      return;

    var loop = $(this).closest('.tabloop');

    // Obtain first and last tabbable elements
    var firstTabbable = loop.find(':tabbable:not([readonly])').first();
    var lastTabbable = loop.find(':tabbable:not([readonly])').last();

    // When leaving the first element with Shift + Tab, focus on the last one
    if (firstTabbable.is(e.target) && e.shiftKey == true) {
      e.preventDefault();
      lastTabbable.focus();
    }

    // When leaving the last element with Tab, focus on the first one
    if (lastTabbable.is(e.target) && e.shiftKey == false) {
      e.preventDefault();
      firstTabbable.focus();
    }
  });
});

.tabloop {
  border: 1px red solid;
  padding: 1ch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>
  <label for="text1">Field 1:</label>
  <input type="text" id="text1">
</p>

<p>
  <label for="text2">Field 2:</label>
  <input type="text" id="text2">
</p>

<p>
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Link</a>
</p>

<p>
  <button type="button">Button</button>
</p>

<div class="tabloop">

  <p>
    <label for="text3">Field 3:</label>
    <input type="text" id="text3">
  </p>

  <p>
    <label for="text4">Field 4:</label>
    <input type="text" id="text4">
  </p>

  <p>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Link</a>
  </p>

  <p>
    <button type="button">Button</button>
  </p>
</div>

Answer 4

After experimenting with jQueryUI, I discovered a simple method to accomplish this task. I established a .tabloop class and implemented the code snippet below.

If you're looking for the :tabbable selector, it's not inherent in jQuery but can be easily created using jQueryUI.

// Focus loop within an element with the tabloop class
$(function() {
  $(document).on('keydown', '.tabloop :tabbable:not([readonly])', function(e) {

    // Only consider Tab key (code 9)
    if (e.keyCode != 9)
      return;

    var loop = $(this).closest('.tabloop');

    // Obtain first and last tabbable elements
    var firstTabbable = loop.find(':tabbable:not([readonly])').first();
    var lastTabbable = loop.find(':tabbable:not([readonly])').last();

    // When leaving the first element with Shift + Tab, focus on the last one
    if (firstTabbable.is(e.target) && e.shiftKey == true) {
      e.preventDefault();
      lastTabbable.focus();
    }

    // When leaving the last element with Tab, focus on the first one
    if (lastTabbable.is(e.target) && e.shiftKey == false) {
      e.preventDefault();
      firstTabbable.focus();
    }
  });
});

.tabloop {
  border: 1px red solid;
  padding: 1ch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>
  <label for="text1">Field 1:</label>
  <input type="text" id="text1">
</p>

<p>
  <label for="text2">Field 2:</label>
  <input type="text" id="text2">
</p>

<p>
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Link</a>
</p>

<p>
  <button type="button">Button</button>
</p>

<div class="tabloop">

  <p>
    <label for="text3">Field 3:</label>
    <input type="text" id="text3">
  </p>

  <p>
    <label for="text4">Field 4:</label>
    <input type="text" id="text4">
  </p>

  <p>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Link</a>
  </p>

  <p>
    <button type="button">Button</button>
  </p>
</div>

Answer 5

Answer №3

Following up on @NicolasBernier's JqueryUI solution, here is the modified code that successfully worked without using the ':tabbable' keyword.

// This section deals with the first tabbable element
$('containerOfInterest').find('firstTabbableElement(e.g. "a")').first().on('keydown', function (e) {

    // Handling shift and tab on the first element
    if (e.shiftKey == true && e.keyCode == 9) {
        console.log('Shift tab on first')
        e.preventDefault();
        
        $('containerOfInterest').find('lastTabbableElement(e.g. "button")').last().focus();
    }
});

// Handling tab on the last element: focusing back to the first one
$('containerOfInterest').find('lastTabbableElement(e.g. "button")').last().on('keydown', function (e) {

    // Leaving the last element with Tab : focus the first one
    if (e.shiftKey == false && e.keyCode == 9) {
        console.log('tab on last')
        e.preventDefault();

        $('containerOfInterest').find('firstTabbableElement(e.g. "a")').first().focus();
    }
});

Answer 6

Following up on @NicolasBernier's JqueryUI solution, here is the modified code that successfully worked without using the ':tabbable' keyword.

// This section deals with the first tabbable element
$('containerOfInterest').find('firstTabbableElement(e.g. "a")').first().on('keydown', function (e) {

    // Handling shift and tab on the first element
    if (e.shiftKey == true && e.keyCode == 9) {
        console.log('Shift tab on first')
        e.preventDefault();
        
        $('containerOfInterest').find('lastTabbableElement(e.g. "button")').last().focus();
    }
});

// Handling tab on the last element: focusing back to the first one
$('containerOfInterest').find('lastTabbableElement(e.g. "button")').last().on('keydown', function (e) {

    // Leaving the last element with Tab : focus the first one
    if (e.shiftKey == false && e.keyCode == 9) {
        console.log('tab on last')
        e.preventDefault();

        $('containerOfInterest').find('firstTabbableElement(e.g. "a")').first().focus();
    }
});

Creating a Loop for Tabs on an HTML Form

Answer №1

Answer №2

Answer №3

Similar questions

Obtain the URL currently loaded in the browser, excluding any URLs retrieved using jQuery's $.get function

I am curious to understand the reasons behind the occurrence of this ID problem

Retrieve the original state of a ReactJs button from the database

Learn how to retrieve data from the console and display it in HTML using Angular 4

Guidelines on centering an AJAX spinning animation within a parent div

sending data from a servlet to ajax

Animating each individual element within the v-for loop in Vue.JS

Guide to removing selected value from a combobox in Angular

Issues with Codeigniter's ajax pagination search functionality failing to display search results as

The setter function for a boolean value in React's useState hook is malfunctioning

Dealing with JSON feed and function events problem with jQuery fullcalendar in Internet Explorer

Instructions for sending a server error response with php

Guide to create a sliding menu transition from the viewport to the header

The Price Filtering feature in the MERN Stack for Products is currently experiencing technical difficulties

Steps for organizing a list based on the number of clicks

Utilizing the Model URL Parameter in VueJS

Error: Authorization requires both data and salt arguments

creating dynamic parameterized URLs in Laravel

data not being transferred successfully to the SQL input from forms

Finding it difficult to grasp the concept of enabling CORS through an ajax request