Vyhledávání na webu

javascript - Zaměřit další prvek v pořadí tabulátoru

Snažím se přesunout fokus na další prvek v pořadí tabulátoru na základě aktuálního prvku, který má fokus. Zatím jsem při svých hledáních nic nenašel.

function OnFocusOut()
{
    var currentElement = $get(currentElementId); // ID set by OnFocusIn 

    currentElementId = "";
    currentElement.nextElementByTabIndex.focus();
}

Samozřejmě, klíčovou částí je nextElementByTabIndex, aby to fungovalo. Jak najdu další prvek v sekvenci tabulátorů? Řešení by muselo být založené na JScript, ne na něčem jako JQuery.

Odpověď #1

Nikdy jsem to neimplementoval, ale podíval jsem se na podobný problém a tady je, co bych zkusil.

Odkazujíc se na implementaci jQuery, musíte:

  1. Poslouchejte Tab a Shift+Tab
  2. Vědět, které prvky lze převádět tabulátorem
  3. Pochopit, jak funguje pořadí záložek

1. Poslouchejte klávesu Tab a Shift+Tab

Poslouchání pro Tab a Shift+Tab je pravděpodobně jinde na webu dobře pokryto, takže tu část vynechám.

2. Vědět, které prvky lze přepínat pomocí tabulátoru

Zjistit, které prvky jsou možné tabulovat, je složitější. V podstatě je prvek tabulovatelný, pokud je zaměřitelný a nemá nastavený atribut tabindex="-1". Musíme se tedy ptát, které prvky jsou zaměřitelné. Následující prvky jsou zaměřitelné:

  • input, select, textarea, button a object elementy, které nejsou deaktivované.
  • Elementy a a area, které mají atribut href nebo mají nastavenou číselnou hodnotu atributu tabindex.
  • jakýkoli prvek, který má nastavenou číselnou hodnotu pro tabindex.

Dále je prvek zaměřitelný pouze tehdy, pokud:

  • Žádný z jeho předků nemá display: none.
  • Vypočítaná hodnota visibility je visible. To znamená, že nejbližší předek, který má nastaveno visibility, musí mít hodnotu visible. Pokud žádný předek nemá nastaveno visibility, pak je vypočítaná hodnota visible.

Další podrobnosti jsou v jiné odpovědi na Stack Overflow.

3. Pochopte, jak funguje pořadí karet

Pořadí tabulátoru prvků v dokumentu je řízeno atributem tabindex. Pokud není nastavena žádná hodnota, má tabindex efektivně hodnotu 0.

Pořadí tabulátorů dokumentu je: 1, 2, 3, ..., 0.

Zpočátku, když má body prvek (nebo žádný prvek) fokus, je prvním prvkem v pořadí tabulace prvek s nejnižším nenulovým tabindex. Pokud má několik prvků stejný tabindex, pokračujete v pořadí dokumentu, dokud nedosáhnete posledního prvku s tímto tabindex. Poté přejdete na další nejnižší tabindex a proces pokračuje. Nakonec dokončete s těmi prvky, které mají nulový (nebo prázdný) tabindex.

Odpověď č. 2

Tady je něco, co jsem pro tento účel postavil:

function focusNextElement() {
  //add all elements we want to include in our selection
  var focussableElements =
    'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
  if (document.activeElement && document.activeElement.form) {
    var focussable = Array.prototype.filter.call(
      document.activeElement.form.querySelectorAll(focussableElements),
      function (element) {
        //check for visibility while always include the current activeElement
        return (
          element.offsetWidth > 0 ||
          element.offsetHeight > 0 ||
          element === document.activeElement
        );
      }
    );
    var index = focussable.indexOf(document.activeElement);
    if (index > -1) {
      var nextElement = focussable[index + 1] || focussable[0];
      nextElement.focus();
    }
  }
}

Funkce:

  • konfigurovatelná sada zaměřitelných prvků
  • není potřeba jQuery
  • funguje ve všech moderních prohlížečích
  • rychlý a lehký

Odpověď č. 3

Bez jQuery: Především přidejte na své prvky, mezi které se dá přepínat, class="tabable", to nám později umožní je vybrat. (Nezapomeňte na prefix selektoru třídy "." v následujícím kódu)

var lastTabIndex = 10;
function OnFocusOut()
{
    var currentElement = $get(currentElementId); // ID set by OnFOcusIn
    var curIndex = currentElement.tabIndex; //get current elements tab index
    if(curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
        curIndex = 0;
    }
    var tabbables = document.querySelectorAll(".tabable"); //get all tabable elements
    for(var i=0; i<tabbables.length; i++) { //loop through each element
        if(tabbables[i].tabIndex == (curIndex+1)) { //check the tabindex to see if it's the element we want
            tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
            break;
        }
    }
}

Odpověď č. 4

Vytvořil jsem jednoduchý jQuery plugin, který právě toto dělá. Používá selektor ':tabbable' z jQuery UI k nalezení dalšího 'tabbable' prvku a jeho výběru.

Příklad použití:

// Simulate tab key when element is clicked 
$('.myElement').bind('click', function(event){
    $.tabNext();
    return false;
});

Odpověď č. 5

Jádro odpovědi spočívá v nalezení dalšího prvku:

  function findNextTabStop(el) {
    var universe = document.querySelectorAll('input, button, select, textarea, a[href]');
    var list = Array.prototype.filter.call(universe, function(item) {return item.tabIndex >= "0"});
    var index = list.indexOf(el);
    return list[index + 1] || list[0];
  }

Použití :

var nextEl = findNextTabStop(element);
nextEl.focus();

Všimněte si, že mi nezáleží na upřednostňování tabIndex.

Související články