Enveloppe ordre de tabulation avec un div (jQuery)

J'ai deux formulaires sur ma page, et lorsque l'accent est mis sur l'un des formulaires, je veux que l'utilisateur puisse uniquement parcourir le formulaire en cours.Enveloppe ordre de tabulation avec un div (jQuery)

Heres ce que le html ressemble:

<html> 
<head> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('form').each(function() {         
     obj = jQuery(this); 
     obj.find('input:last').keydown(function(e) {      
     if (e.keyCode == 9 && !e.shiftKey) {      
      e.preventDefault();         
      obj.find('input:first').focus();     
     } 
     })          
     obj.find('input:first').keydown(function(e) {      
     if (e.keyCode == 9 && e.shiftKey) {       
      e.preventDefault();         
      obj.find('input:last').focus();      
     } 
     }) 
    }) 
    }) 
</script> 
<body> 
    <form> 
    <input id="1" /> 
    <input id="2" /> 
    </form> 
    <form> 
    <input id="3" /> 
    <input id="4" /> 
    <form> 
</body> 
</html>

Lorsque vous appuyez sur l'onglet, à partir du ID 1, l'ordre de tabulation ressemble à ceci:

1 <tab> 2 <tab> 3 <tab> 4 <tab> 3 <tab> 4 <tab> ...

En appuyant sur Maj + Tab à partir de ID 2:

2 <shift> + <tab> 1 <shift> + <tab> 4 <shift> + <tab> 3 <shift> + <tab> 4 <shift> + <tab> 3 ...

Ce que je voudrais voir se produire, lorsque sur ID 1:

1 <tab> 2 <tab> 1<tab> 2 <tab> ...

Et en arrière:

1 <shift> + <tab> 2 <shift> + <tab> 1 ...

Toutes les idées pourquoi l'ordre de tabulation enveloppe la dernière forme, mais pas sur le premier?

Source

2010-07-14 karlw

Votre ''

. Je doute que ce soit le problème, mais cela peut aider. –

est ici la solution:

Remplacer

obj.find('input:first').focus();

avec

$(this).closest('form').find('input:first').focus();

et remplacer

obj.find('input:last').focus();

avec

$(this).closest('form').find('input:last').focus();

La raison pour laquelle cela ne fonctionnait pas est que la valeur obj est modifiée lors de la deuxième exécution de .each().

Source

2010-07-14 02:03:14

Vous avez évidemment résolu le problème J'ai cependant eu un problème similaire il ya un certain temps et est venu avec minuscule plugin qui limite les champs que touche TAB (shift + TAB). J'espère que cela pourrait aider quelqu'un avec un problème similaire, car cela semble assez commun.

utiliser Il suffit de:

$(".someGroup").tabGuard();

ou dans votre cas

$($("form")[0]).tabGuard(); 
$($("form")[1]).tabGuard();

et qui fera l'onglet itérer sur les champs à l'intérieur d'une forme seulement, selon ce qui est mis au point. De cette façon, vous pouvez grouper divers groupes de champs sur une page et celui qui est en focus continuera à itérer sur TAB ou Shift + TAB si cela a du sens. Trouvez ici:

http://tomaszegiert.seowebsolutions.com.au/tabguard/index.htm

Source

2013-05-26 08:37:56 spirytus

Enveloppe ordre de tabulation avec un div (jQuery)

Répondre

Questions connexes