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

A guide on extracting the text attribute of an element using an index in jQuery

ability to reach the sub-element dictionaries in typescript

Identify the Google Maps Marker currently displayed on the screen

Vue Labyrinthine Design theme

In what way is the background-color of WindowInfoBackground utilized?

Utilize background-size:cover and incorporate text in a horizontally scrolling webpage

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Verify if the value in a textbox exceeds the number entered in an array of textboxes

Issue with sending data from JQuery Ajax to PHP codeExplanation:The problem

Performance problems arising from use of Tailwind CSS drop-shadow class

Error: Unable to access undefined properties while trying to read 'add' value. Issue identified in the code related to "classlist.add" function

"Embrace the power of Ajax and JSON with no regrets

Experiencing a PHP Contact Form Problem - Unable to Identify the 400 Error Cause

Utilizing jQuery's .ready() method within the body section of a document to modify the onload event following the printing of the body

How to execute a system command or external command in Node.js

Issue with Firefox compatibility in Backbone.js

Exploring nested routes with HashRouter in React

Neglecting asynchronous Ajax functions once they have been called

Tips on showing content while filtering is taking longer with AngularJS

Injecting CSS styles into dynamically inserted DOM elements