Come limitare gli indici delle tabulazioni solo a un overlay e ai relativi elementi

Ho una pagina complessa con diversi overlay (tipo lightbox) che appaiono in base alle selezioni da diversi menu a discesa. Questo è fatto con jQuery. L'obiettivo è di limitare l'utente a essere in grado di passare attraverso gli elementi sulla sovrapposizione (sopra posizionati lightbox div) tramite la tastiera. In altre parole, rimuovi gli elementi di pagina sottostanti dalla sequenza di tabulazioni.Come limitare gli indici delle tabulazioni solo a un overlay e ai relativi elementi

Sono consapevole che posso impostare tabindex = "- 1" attributi su tutti gli elementi sottostanti usando javascript o jQuery, che funziona, ma con un unico grande svantaggio.

Il problema è che il progetto potrebbe richiedere che alcuni degli elementi sottostanti abbiano indici di tabulazione diversi dall'indice di tab del browser predefinito. Se esistessero degli attributi di indice di tabulazione impostati sugli elementi menzionati sotto, li perderò quando li imposterò tutti su "-1".

Quindi, mi chiedo se c'è un altro modo per limitare l'indicizzazione delle schede solo al div overlay, o se c'è un altro approccio che non ho pensato di risolvere questo? Qualsiasi aiuto sarebbe molto apprezzato in quanto questo sta uccidendo il mio tempo di produzione!

fonte

2012-07-05 user1505068

Controlla la mia risposta [qui] (http://stackoverflow.com/questions/5206813/restrict-tabindex-focusing-to-a-section-of-the-page/5206844#5206844). – canon

Ecco una soluzione semplice al problema che non richiede l'uso globale di tabindex. (usando jQuery). L'ho controllato in Firefox, Chrome, Safari, Opera e IE9, IE8 e IE7. Sembra funzionare bene.

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

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

in modo che i campi di input html sul sovrapposizione sarebbe grosso modo simile:

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

In questo modo il tasto di funzionare come farebbe normalmente, tranne che nel caso di sfocatura, come ad esempio quando si scheda off del pulsante, quindi ti porta al campo di input designato, in questo caso quello che ha l'id di 'firstItemInSequence'.

fonte

2012-07-06 15:19:39 user1505068

che l'evento sfocatura non si attiva solo per la scheda, è meglio gestire l'evento keydown della scheda e controllare se si è sul primo/ultimo controllo. Vedere le righe 23-83 e 143-153 in https://gist.github.com/0d04646ab6cf4df50610 –

Ricordarsi di inserire i controlli rilevanti per la navigazione all'indietro. Questo funziona per la navigazione in avanti, ma fallirebbe per la navigazione con scheda di navigazione. Lo stesso codice però. – Joshua

Soluzione molto bella. Ma Giosuè ha perfettamente ragione: pedalare avanti e indietro è fondamentale. –

Un'altra soluzione. Questa funzione attiva il controllo con id = controlID dopo aver premuto il tasto TAB in un controllo con tabIndex = maxindex. Questo produrrà un movimento circolare premendo TAB.

Sarebbe trova in:

<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; 
    } 
};

fonte

2013-01-24 19:44:37

Penso plugin jQuery ho creato avrebbe fatto quello che ti serve:

https://github.com/spirytoos/TABGuard

Spero che aiuta

fonte

2013-05-24 00:10:41 spirytus

scuse, il collegamento è stato modificato, la risposta è stata aggiornata – 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() funzione a due attributo che è ultima in Tabindex Div e Selector_With_Where_Tab_Index_You_Want è la classe o l'ID del div in cui si desidera tabindexto ripetere.

fonte

2014-02-14 16:33:16

Come limitare gli indici delle tabulazioni solo a un overlay e ai relativi elementi

risposta

Problemi correlati