2010-05-24 22 views
5

Estoy usando controles Telerik, específicamente el cuadro de texto numérico donde puede establecer una flecha hacia arriba para incrementar/disminuir valores en un cuadro de texto. Estoy obligado a configurar el orden de tabulación para pasar al campo siguiente, pero dado que hay un botón en la flecha hacia arriba y hacia abajo, el navegador pasará por esos botones primero y luego pasará al siguiente campo de texto.cómo establecer el orden de tabulación en jquery

¿Cómo se configura el jquery para detectar el siguiente campo de entrada textbox/dropdown/etc visible y se mueve a eso al presionar el botón de tabulación en lugar de ejecutar a través de los botones cerca de él?

Respuesta

4

En realidad configura esto con el atributo HTML tabindex ordenado de forma ascendente numérica para todas las entradas en la página. Por lo tanto, para omitir los botones, comience con la primera entrada en la página asignándole tabindex=1, el segundo tabindex=2, configurando las entradas subsiguientes en consecuencia. Cuando llegue a los botones que desea omitir, simplemente no le dé un valor de tabindex ni le proporcione índices al final de la lista.

+4

No, averiguar el orden de las pestañas es un trabajo tremendo, lo mejor es dejarlo a la mano. Además, si no especifica el índice de pestañas obtendrá un valor automáticamente. Para suprimir realmente un elemento para el orden de tabulación, déle un índice de tabulación de menos 1. Para habilitar un elemento para el orden de tabulación y dejar que el navegador decida sobre el mejor índice, proporcione un índice de tabulación cero. –

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

+1 solución limpia – diEcho

2

También puede probar esta

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

A veces cuando se generan elementos de código o de reordenamiento con jQuery la solución es no utilizar TabOrder sino sólo asegúrese de poner los elementos en el DOM en el orden correcto Vea el ejemplo a continuación.

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> 
Cuestiones relacionadas