Jak ograniczyć indeksy kart do samej nakładki i jej elementów?

Mam złożoną stronę z kilkoma nakładkami (typu lightbox), które pojawiają się na podstawie wyborów z kilku rozwijanych menu. Odbywa się to za pomocą jQuery. Celem jest ograniczenie użytkownika do przechodzenia tylko przez elementy na nakładce (powyżej pozycji lightbox div) za pomocą klawiatury. Innymi słowy, usuń leżące poniżej elementy strony z sekwencji kart.Jak ograniczyć indeksy kart do samej nakładki i jej elementów?

Jestem świadomy, że mogę ustawić atrybuty tabindex = "- 1" na wszystkich poniższych elementach leżących za pomocą javascript lub jQuery, co działa, ale z jedną dużą wadą.

Problem polega na tym, że projekt może wymagać, aby niektóre z poniższych elementów leżących miały określone indeksy kart inne niż domyślny indeks karty przeglądarki. Jeśli na poniższych elementach leżących znajdują się jakiekolwiek istniejące atrybuty indeksu tabulacji, stracę je, gdy ustawię je wszystkie na "-1".

Zastanawiam się, czy istnieje inny sposób ograniczenia indeksowania tabulatorów do div tylko nakładki, czy też istnieje inne podejście, o którym nie pomyślałem, aby rozwiązać ten problem? Jakakolwiek pomoc byłaby bardzo ceniona, ponieważ zabija mój czas produkcji!

Źródło

2012-07-05 user1505068

Sprawdź moją odpowiedź [tutaj] (http://stackoverflow.com/questions/5206813/restrict-tabindex-focusing-to-a-section-of-the-page/5206844#5206844). – canon

Oto proste rozwiązanie problemu, który nie wymaga globalnego użycia tabindex. (używając jQuery). Sprawdziłem to w przeglądarkach Firefox, Chrome, Safari, Opera i IE9, IE8 i IE7. Wydaje się działać dobrze.

function tabFocusRestrictor(lastItem,firstItem){ 
    $(lastItem).blur(function(){ 
     $(firstItem).focus(); 
    }); 
}

tabFocusRestrictor ('# clsButton', '# firstItemInSequence');

więc html pól wejściowych nakładki byłoby z grubsza wygląda tak:

<form> 
    <input type="text" id="firstItemInSequence" /> 
    <input type="text" id="secondItemInSequence" /> 
    <input type="text" id="thirdItemInSequence" /> 
    <button id="clsButton">close</button> 
</form>

Pozwala przycisk, aby funkcjonować jak zazwyczaj, z wyjątkiem rozmycia, takie jak wtedy, gdy zakładka wyłączyć przyciskiem, a następnie przeniesie Cię do wyznaczonego pola wejściowego, w tym przypadku takiego, który ma identyfikator "firstItemInSequence".

Źródło

2012-07-06 15:19:39 user1505068

, które zdarzenie blur nie tylko uruchomi kartę, lepiej poradzić sobie ze zdarzeniem keydown karty i sprawdzić, czy jesteś na pierwszej/ostatniej kontroli. Zobacz linie 23-83 i 143-153 w https://gist.github.com/0d04646ab6cf4df50610 –

Pamiętaj, aby umieścić odpowiednie kontrolki do nawigacji wstecznej. Działa to w przypadku nawigacji do przodu, ale zakończyłoby się niepowodzeniem w przypadku nawigacji na pasku przesuwania. Ten sam kod. – Joshua

Bardzo ładne rozwiązanie. Ale Joshua ma rację: jazda na rowerze zarówno do przodu jak i do tyłu jest najważniejsza. –

Inne rozwiązanie. Ta funkcja aktywuje kontrolę z id = controlID po naciśnięciu klawisza TAB w formancie z tabIndex = maxindex. Spowoduje to ruch okrężny, naciskając klawisz TAB.

byłoby położony w:

<body class="body" onkeydown="return onKeyDownTab(event, 7,'txtName');"> 


function onKeyDownTab(event, maxIndex, controlFocusID) 
{ 

    var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; 
    if (key == 9) 
    { 
     try 
     { 
      if (event.srcElement.id == "" || event.srcElement.className.indexOf("body") > -1) 
      { 
       document.getElementById(controlFocusID).focus(); 
       return false; 
      } 
      if (parseInt(event.srcElement.attributes.tabIndex.value) < 0 || parseInt(event.srcElement.attributes.tabIndex.value) >= maxIndex) 
      { 
       document.getElementById(controlFocusID).focus(); 
       return false; 
      } 
      return key; 
     } 
     catch (e) 
     { 
      return false; 
     }   
    } 
    else 
    { 
     return key; 
    } 
};

Źródło

2013-01-24 19:44:37

myślę plugin jQuery I stworzył zrobi co trzeba:

https://github.com/spirytoos/TABGuard

Mam nadzieję, że to pomaga

Źródło

2013-05-24 00:10:41 spirytus

przeprosiny, link się zmienił, zaktualizowano odpowiedź teraz – spirytus

jSFiDDLE

$(document).ready(function() { 
lastIndex = 0; 
$(document).keydown(function(e) { 
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex"); 
    if (e.keyCode == 9) { 
     if (e.shiftKey) { 
      //Focus previous input 
      if (thisTab == startIndex) { 
       $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus(); 
       return false; 
      } 
     } else { 
      if (thisTab == lastIndex) { 
       $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); 
       return false; 
      } 
     } 
    } 
}); 
var setTabindexLimit = function(x, fancyID) { 
     console.log(x); 
     startIndex = 1; 
     lastIndex = x; 
     tabLimitInID = fancyID; 
     $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); 
    } 
/*Taking last tabindex=10 */ 
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want"); 
});

setTabindexLimit() funkcja dwa atrybut który jest ostatnim TabIndex w Div i Selector_With_Where_Tab_Index_You_Want jest klasa lub identyfikator div, w którym chcesz tabindexto powtórzyć.

Źródło

2014-02-14 16:33:16

Jak ograniczyć indeksy kart do samej nakładki i jej elementów?

Odpowiedz

Powiązane problemy