Search code examples
javascriptjqueryinternet-explorerbrowsertabindex

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>
Solution

  • 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>