Set tabindex in vertical order of columns

Question

I am assigning tabindex for my input type text, and which are not disabled/hidden. The following is what I tried, and it works. However, The order of indexes are horizontally assigned in the table. I would need the order of tabindex in column wise rather than horizontal. Any suggestions how to achieve that ? I want the order to be as follow This Q is a follow up to this enter key to follow the tabindex (in scenario where enter key is changed to behave as tab).

   col1 col2 col3
    1      3    7
    2      4    8
           5    9 
           6   10  

(":input:not([disabled]):not(:hidden)").not($(":submit")).not($(":reset")).each(function (i) { $(this).attr('tabindex', i + 1); })

Answer 1

This example will help you set the tabindex based on the columns:

function fixVerticalTabindex(selector) {
  if (typeof selector == 'undefined') {
    selector = '.reset-tabindex';
  }
  var tabindex = 1;
  $(selector).each(function(i, tbl) {
    $(tbl).find('tr').first().find('td').each(function(clmn, el) {
      $(tbl).find('tr td:nth-child(' + (clmn + 1) + ') input').each(function(j, input) {
        $(input).attr('placeholder', tabindex);
        $(input).attr('tabindex', tabindex++);
      });
    });
  });
}
$(function() {
  $('#btn-fix').click(function() {
    fixVerticalTabindex('.reset-tabindex');
  });
});

table {
  border: 1px solid red;
}

input {
  border: 1px solid black;
  width: 75px;
  height: 65px;
  font-size: 25px;
  text-align: center;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<table class="reset-tabindex">
  <tr>
    <td><input /></td>
    <td>no input</td>
    <td>no input</td>
  </tr>
  <tr>
    <td>no input</td>
    <td><input /></td>
    <td><input /></td>
  </tr>
  <tr>
    <td><input /></td>
    <td>no input</td>
    <td><input /></td>
  </tr>
</table>
<br /><br />
<table class="reset-tabindex">
  <tr>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
  </tr>
  <tr>
    <td>no input</td>
    <td>no input</td>
    <td>no input</td>
    <td>no input</td>
    <td><input /></td>
  </tr>
  <tr>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
  </tr>
  <tr>
    <td>no input</td>
    <td>no input</td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
  </tr>
  <tr>
    <td>no input</td>
    <td>no input</td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>
<br /><br />
<button id="btn-fix">Click to fix vertical tabindex</button>

The function will "fix" every table on it's own (will not mix between columns of different tables).

I didn't check the function for tables with colspan/rowspan, but my guess is that it will not work correctly.

The line $(input).attr('placeholder', tabindex); is there only for preview and debugging, you can remove on production.

Answer 2

Based on this solution for arrow keys I modified the code to work also with enter key and the tab key with specified column-wise mode.

I don't think that it is the best idea to specify tabindex attributes for such case. You would have to recaltulate them on every change in number of columns or rows. Also it would change the flow of focusable elements on page (table first then its surrounding).

/*!
* based on formNavigation https://github.com/omichelsen/FormNavigation
*/
(function ($) {
  $.fn.formNavigation = function () {
    $(this).each(function () {
      // Events triggered on keyup
      $(this).find('input').on('keyup', function(e) {
        switch (e.which) {
          // arrow right
          case 39:
            $(this).closest('td').next().find('input').focus();
            break;

          // arrow left
          case 37:
            $(this).closest('td').prev().find('input').focus();
            break;

          // arrow bottom
          case 40:
            $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();
            break;

          // arrow top
          case 38:
            $(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus();
            break;

          // enter
          case 13:
            if ($(this).closest('td').next().find('input').length>0) {
              // when there is another column on right
              $(this).closest('td').next().find('input').focus();
            } else {
              // when last column reached
              $(this).closest('tr').next().children().eq(1).find('input').focus();
            }
            break;
        }
      });
      
      // Events triggered on keydown (repeatable when holding the key)
      $(this).find('input').on('keydown', function(e) {
        // Vertical navigation using tab as OP wanted
        if (e.which === 9 && !e.shiftKey) {
          // navigate forward
          if ($(this).closest('tr').next().find('input').length>0) {
            // when there is another row below
            e.preventDefault();
            $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();
          } else if ($(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').length>0) {
            // when last row reached
            e.preventDefault();
            $(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').focus();
          }
        } else if (e.which === 9 && e.shiftKey) {
          // navigate backward
          if ($(this).closest('tr').prev().find('input').length>0) {
            // when there is another row above
            e.preventDefault();
            $(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus();
          } else if ($(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').length>0) {
            // when first row reached
            e.preventDefault();
            $(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').focus();
          }
        }
      });
    });
  };
})(jQuery);

// usage
$('.gridexample').formNavigation();

/* For demonstration only */
.gridexample {
  font-size: 1.1em;
}
.gridexample th {
  padding: .15em .5em;
}
.gridexample td {
  padding: .1em;
  width: 5em;
}
.gridexample input[type="text"] {
  width: 100%;
  line-height: 2;
  box-sizing: border-box;
}

<p>
  Sample <a href="#">links</a> around the table (to simulate <a href="#">focus</a> outside the table).
</p>

<table class="gridexample">
  <thead>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>2</th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>3</th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>4</th>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
  </tbody>
</table>

<p>
  Sample <a href="#">links</a> around the table (to simulate <a href="#">focus</a> outside the table).
</p>

<!-- jQuery needed for this solution -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Answer 3

From this @ Merlyn Morgan-Graham solution here How can I use jQuery to reassign the tab-order from horizontal to vertical in a table? and @dekel solution here, I came up with the below answer. Which works for most part. enter key to follow the tabindex (in scenario where enter key is changed to behave as tab)

function assignTabIndex() {
    // Define variables 
    var maxRowCount = 0;        
    // Loop through all rows and find the children (td) length
    // Get the maxRowCount
    $('table tbody tr').each(function() {
        maxRowCount = Math.max(maxRowCount, $(this).children('td').length);        
    });

    // Define and start the cell count at 1
    var cellCounter = 1;
    // Loop through the table, column first instead of row first
    for (var columnIndex = 0; columnIndex < maxRowCount; ++columnIndex) {
        // Loop through all the rows for the current column
        $('form table tr').each(function() {
            // ...but only look at cells matching the current column
            var cellForCurrentColumn = $(this)
                .children('td')
                .eq(columnIndex)
                .find('input[type =text]:not([disabled])');
            // Some rows could be bigger than others,
            // so cellForCurrentColumn might not exist for shorter rows
            if (cellForCurrentColumn != null) {
                // Set the tab index and then increment the counter
                cellForCurrentColumn.attr('tabindex', cellCounter++);
            }
        });
    }
};
// Enter key to follow tab index

   function EnterKeyAsTabKey() {
    $(document).ready(function() {
        assignTabIndex(); //call the assignTabIndex function

        // Will only run once the page Document Object Model (DOM) is ready for JavaScript code 
        // Create a jQuery object containing the html element 'input', and not disabled
        // Create a .not() method to exclude buttons for keypress event
        $(":input:not([disabled])").not($(":button")).keypress(function(evt) {
            // If the keypress event code is 13 (Enter)
            if (event.which === 13 && this.type !== 'submit' || 'reset') {
                evt.preventDefault();
                // Get the attribute type and if the type is not submit
                itype = $(this).prop('type');
                // Get the current Tabindex
                currentTabindex = $(this).attr('tabindex');
                // alert(currentTabindex); // alert to check the value a variable has. Good for trouble shoot
                if (currentTabindex) {
                    nextInput = $('input[tabindex^="' + (parseInt(currentTabindex) + 1) + '"]');
                    // console.log(this, nextInput); // to print next input in console. Good for trouble shoot
                    if (nextInput.length) {
                        nextInput.focus();
                    } else
                        return false;

                }

            }
        });
    })
};

Answer 4

Here is the solution, if all of your inputs are in same-level divs (let's say each is in Bootstrap col-md-*):

let columns_number=4; // static for me, but you can send/get it via data-columns="4" as form attribute

$('form').find('input, select, textarea').each(function(){
    $(this).attr('tabindex', $(this).attr('type')==='submit' ? 999 : $(this).closest('div').index()%columns_number+1);
});

JSFiddle: https://jsfiddle.net/x5oh7edf/