Set the tab focus on current item

JavaScript
1

I am trying to set the tab focus on current item when i click any button but the focus goes to the start of the page

var ve = ve || {};
ve.woningoverzicht = (function() {
    'use strict';

    function init() {
        databind();
        $('form').removeData('validator');
        $('form').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse('form');
    }

    function databind() {

        $.validator.setDefaults({
            ignore: ""
        });

        $(document).on('click', '#SelecteerAndereErkendDeskundige', function () {
            $(this).attr('disabled', 'disabled');
        });

        $(document).on('click', '#btnzoekinwoningen', function () {
            getWoningZoekenPage(0);
        });
       
        $(document).on('click', '#btnHerstelZoekOpties', function () {
            getWoningPage(0);
        });

        $(document).on('change', '#woning-overzicht-zoek-form :input', function () {
            $.validator.unobtrusive.parse('form');
        });

        $(document).on('click', '.woning-overzicht-goto-pagina', function () {
            getWoningPage(parseInt($(this).data("goto-pagina")));
        });

        $(document).on('click', '.woning-overzicht-zoeken-goto-pagina', function () {
            getWoningZoekenPage(parseInt($(this).data("goto-pagina")));
        });


    }

    return {
        init: init
    };


    function getWoningZoekenPage(paginaNummer) {
        if (!$('#WoningZoeken_Postcode').valid() || !$('#WoningZoeken_Huisnummer').valid()) {
            return false;
        }
        var zoekenViewModel = {
            Postcode: $('#WoningZoeken_Postcode').val(),
            Huisnummer: $('#WoningZoeken_Huisnummer').val(),
            Toevoeging: $('#WoningZoeken_Toevoeging').val(),
            Pagina: paginaNummer
        }

        $.ajax({
            url: '/Woning/ZoekWoning',
            type: 'post',
            cache: false,
            dataType: "json",
            contentType: 'application/json',
            data: JSON.stringify(zoekenViewModel)
        })
        .success(function (result) {
            $("#woningen-overzicht-list").empty();
            $("#woningen-overzicht-list").html(result.Zoekresultaat);
        });
        
    }

    function getWoningPage(paginaNummer) {
        $.ajax({
            url: '/Woning/GetWoningOverzichtPage',
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            cache: false,
            data: JSON.stringify({ Pagina: paginaNummer })
        })
            .success(function (result) {
                $("#woningen-overzicht-list").empty();
                $("#woningen-overzicht-list").html(result);
            });
    }

}());

Html page

@model DICTU.VEL.Presentation.Web.ViewModels.Woning.Pager

<div class="row">
    <div class="col-md-20 col-md-offset-2">
        <div class="text-center">
            <nav>
                <ul id="list" class="pagination">
                    @if (Model.CurrentPage > 1)
                    {
                        <li>
                            <a href="@Url.Action(VE.Woning.WoningOverzicht())" aria-label="Eerste">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="woning-overzicht-goto-pagina" data-goto-pagina="@(Model.CurrentPage-1)" aria-label="Vorige">
                                <span aria-hidden="true">&lsaquo;</span>
                            </a>
                        </li>
                    }

                    @for (var page = Model.StartPage; page <= Model.EndPage; page++)
                    {
                        <li class="@(page == Model.CurrentPage ? "active" : "")">
                            <a href="javascript:void(0)" class="woning-overzicht-goto-pagina" data-goto-pagina="@page">@page</a>
                        </li>
                    }

                    @if (Model.CurrentPage < Model.TotalPages)
                    {
                        <li>
                            <a href="#" class="woning-overzicht-goto-pagina" data-goto-pagina="@(Model.CurrentPage+1)" aria-label="Volgende">
                                <span aria-hidden="true">&rsaquo;</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="woning-overzicht-goto-pagina" data-goto-pagina="@Model.TotalPages" aria-label="Laatste">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    }
                </ul>
            </nav>
        </div>
    </div>
</div>
<script type="text/javascript">
   
        var ul = document.getElementById("list");
        var items = ul.getElementsByTagName("a");
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                alert('aaa');
                this.focus();
                return false;
            }
        }
</script>
2

The… only way i can think you’d be able to do this is essentially:

Set a tabindex attribute for all relevant elements.

On load:

  • set variable CurTabIndex to 0.
  • set variable MaxTabIndex to the number of elements with tab indexes.

On click for relevant items:

  • if CurTabIndex < this.tabindex: trigger keypress(tab) (this.tabindex-CurTabIndex) times.
  • else trigger keypress(tab) (MaxTabIndex-CurTabIndex+this.tabindex) times.

On tab keypress:

  • set CurTabIndex = (CurTabIndex+1)%(MaxTabIndex+1)
    (that last +1 my brain is fighting me on.)
3

Hi! Thank you! But i dont understand like this. could you please type this as code.

4

It’s already written in pseudocode.

Which parts are you having trouble understanding?

5
  • if CurTabIndex < this.tabindex: trigger keypress(tab) (this.tabindex-CurTabIndex) times.
  • else trigger keypress(tab) (MaxTabIndex-CurTabIndex+this.tabindex) times.
6

So let’s say the user clicks on an element with a tabindex of 3.
Let’s say they havent clicked anything else yet, so CurTabIndex is still 0 (from when we loaded).

To get the user’s focus to that element while advancing the browser’s internal tab count (or at least mimicing it), we have to push the tab key 3 times for them.
This will then set the CurTabIndex to 3.

If I then click something with a tabindex of 1, I cant… un-tab. So what I have to do is push the tab key enough times to get back to the beginning (MaxIndex-CurIndex), and then an additional 1 times (this.tabindex).

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.