How to remove browsers functions from tabindex flow?

I have settled tab indexes on all elements in my JSP page which is working fine, but in the tab index flow browser's functions are also get focused.

Example: When the tab focus is on last element of my page and if I hit tab again then focus is going to browser's address bar, refresh button, tab window and home button.

I want focus should be on the first element which having tab index 1 after the last tab index which is 10.

How can I restrict these browsers functions from tab focusing. I am using Javascript/JQuery and IE 9.

Following is my page:

<html>
    <body>
        <script src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //functions
            });
        </script>
        <div id="xyz">
            <ul >
                <li>
                    <div>
                        <input type="text" maxlength="30" tabindex = "1" />
                        <br>
                        <input type="text" maxlength="30" tabindex = "2" />
                        <br>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div>
                        <input type="checkbox" id="checkBox1" value="false" tabindex ="3"/>
                    </div>
                    <div>
                        <input type="checkbox" id="checkBox2" value="false" tabindex ="4"/>
                    </div>
                </li>
                <li>
                    <div>
                        <input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex ="5"/>
                    </div>
                    <div>
                        <input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex ="6"/>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

Answers


You can use the script below to focus the first element if current focus is last element.

<input id="firstElement" value="" />
<!---series of dom element-->
<input id="lastElement" value="" />
<script>
   $('#lastElement').keydown(function(e) {
      if (e.keyCode == 9) {
          $('#firstElement').focus();
          e.preventDefault();
      }
   });

</script>

You can use keydown event in combination with .index() and .length check:

$('#xyz').find(':input').last().keydown(function(e) {
  if ($(this).attr('tabindex') == $('#xyz').find(':input').length) {
    if (e.keyCode === 9) {
      e.preventDefault();
      $('input[type="text"]').first().trigger('focus');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xyz">
  <ul>
    <li>
      <div>
        <input type="text" maxlength="30" tabindex="1" />
        <br>
        <input type="text" maxlength="30" tabindex="2" />
        <br>
      </div>
    </li>
  </ul>
  <ul>
    <li>
      <div>
        <input type="checkbox" id="checkBox1" value="false" tabindex="3" />
      </div>
      <div>
        <input type="checkbox" id="checkBox2" value="false" tabindex="4" />
      </div>
    </li>
    <li>
      <div>
        <input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex="5" />
      </div>
      <div>
        <input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex="6" />
      </div>
    </li>
  </ul>
</div>

Need Your Help

html5 image cropping

javascript html5 canvas

I'm using context-blender to apply a multiply effect on the first 192 pixels of the html background-image with a fixed color to achieve a transparency effect on the header of the page.

Make left menu fixed inside parent container

javascript php jquery html css

I want to make left menu sticky, but when i give it position:fixed then the right container which is also inside parent div comes down in the left side. Please help. Thanks... This is my html struc...