What is necessary for Tab Movement in HTML webpage

Question

I just want to know what is necessary to maintain tab movement in a webpage so that keys like Tab & Tab+shift functionality should work everywhere.

In a Div based html and table based html both works but when label are included this functionality stops working in mozilla. I tried using tabindex but it doesn't work.

<h3>Div</h3> 
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>

<h3>Table</h3>

<table>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
</table>

score 0 · Answer 1 · edited May 23 '17 at 11:54

I took help from these two question question1 and question2 and built a script that will help in tab movement.

Here is my code. Pages in which you don't require tab movement.

<script> var notabmovement = true;</script>

Before this script.

if (typeof notabmovement === 'undefined' || !notabmovement) {
            //Tab Movement //TAB & TAB+SHIFT
            $("body").on('change', function () {
                $(":input:not([type=hidden]):visible").each(function (i) {
                    $(this).attr('tabindex', i + 1);
                });
            });
            $("body").on('click', function () {
                $(":input:not([type=hidden]):visible").each(function (i) {
                    $(this).attr('tabindex', i + 1);
                });
            });
            $(":input:not([type=hidden]):visible").each(function (i) {
                $(this).attr('tabindex', i + 1);
            });
            $(':input').on('keydown', function (e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode == 9) {
                    if (e.shiftKey) {
                        tindex = parseInt($(this).attr("tabindex")) - 1;
                        if ($(":input[tabindex='" + tindex + "']"))
                        {
                            $(":input[tabindex='" + tindex + "']").focus();
                        }
                    } else {
                        tindex = parseInt($(this).attr("tabindex")) + 1;
                        if ($(":input[tabindex='" + tindex + "']"))
                        {
                            $(":input[tabindex='" + tindex + "']").focus();
                        }
                    }
                    return false;
                }                   
           });

}

Now you can use tab and shift + tab

What is necessary for Tab Movement in HTML webpage

1 Answers1