2010-05-24 5 views
5

J'utilise des contrôles Telerik, en particulier la zone de texte numérique, dans laquelle vous pouvez définir une flèche haut-bas pour incrémenter/décrémenter des valeurs dans une zone de texte. Je dois définir l'ordre de tabulation pour passer au champ suivant, mais comme il y a un bouton sur la flèche haut-bas, le navigateur passera d'abord par ces boutons puis passera au champ de zone de texte suivant.Comment régler l'ordre des onglets dans jquery

Comment définir la jquery pour détecter le prochain champ de texte visible/dropdown/etc et passer à celui en appuyant sur le bouton de tabulation au lieu de courir à travers les boutons près de lui?

Répondre

4

Vous définissez en fait ceci avec l'attribut HTML tabindex ordonné en ordre croissant numérique pour toutes les entrées sur la page. Pour ignorer les boutons, commencez par la première entrée de la page en lui affectant tabindex=1, la seconde tabindex=2, en définissant les entrées suivantes en conséquence. Lorsque vous arrivez aux boutons que vous voulez ignorer, ne leur donnez pas une valeur tabindex, ou donnez-leur des index à la fin de la liste.

+4

Non. Déterminer l'ordre des onglets est un sacré boulot qu'il vaut mieux laisser au broswer. De plus, si vous ne spécifiez pas l'index de tabulation, il recevra une valeur automatiquement. Pour vraiment supprimer un élément pour l'ordre de tabulation, donnez-lui un index de tabulation de moins 1. Pour activer un élément pour l'ordre de tabulation et laissez le navigateur décider sur le meilleur index, donnez-lui l'index de tabulation de zéro. –

17
$(function() { 
    var tabindex = 1; 
    $('input,select').each(function() { 
    if (this.type != "hidden") { 
     var $input = $(this); 
     $input.attr("tabindex", tabindex); 
     tabindex++; 
    } 
    }); 
}); 
+0

+1 solution propre – diEcho

2

Vous pouvez également essayer ce

$('input,select :visible').each(function (i) { $(this).attr('tabindex', i + 1); }); 
1

Parfois, lorsque vous générez des éléments de code ou réordonnancement avec jQuery la solution est de ne pas utiliser TabOrder mais assurez-vous juste que vous mettez les éléments dans le DOM l'ordre correct. Voir l'exemple ci-dessous.

JQuery code:: 
var anchorB = jQuery('#anchorB'); 
jQuery('#divB').remove(); 
anchorB.insertBefore("#anchorC"); 


Before:: 
<a id="anchorB" href="#">Anchor B</a> 
<a id="anchorA" href="#">Anchor A</a> 
<a id="anchorC" href="#">Anchor C</a> 

After:: 
<a id="anchorA" href="#">Anchor A</a> 
<a id="anchorB" href="#">Anchor B</a> 
<a id="anchorC" href="#">Anchor C</a>