TabIndex en formato dinámico (los elementos aparecen según el caso) problema

He estado trabajando en una forma más compleja donde los campos se muestran dependiendo de algunas condiciones de los valores ingresados en un formulario.TabIndex en formato dinámico (los elementos aparecen según el caso) problema

Sin embargo, cuando se introduce a través de la forma <Tab> clave (Key-<Tab>> introducir de valor><Tab> llave), no va al campo recién aparecido, pero a la que antes era visible.

El siguiente es el ejemplo simplificado. Si escribe algo en el campo con el número 1, se activa el evento de cambio y se muestra la entrada con el valor 2, pero no el siguiente en el que se enfoca.

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<form> 
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()"> 
    <input id="input2" value="2" tabindex="2" style="display: none;"> 
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()"> 
    <input id="input4" value="4" tabindex="4" style="display: none;"> 
    <input id="input5" value="5" tabindex="5"> 
    <input id="input6" value="6" tabindex="6"> 
</form>

Debido a su complejidad, no me gustaría jugar con el control directo de la llave <Tab>. Además, no puedo usar el onchange="$('#input2').show();$('#input2').focus()" ya que se usa el mismo código también en los casos en que no es un próximo elemento inmediato. ¿Hay alguna manera de resolver esto?

Gracias de antemano por cualquier comentario/sugerencia.

Fuente

2012-01-25 Sale

Tuve un problema similar cuando el 'onchange' estaba en un' select' (en este caso FF es el principal navegador problemático). Lo resolví 'vinculando 'la misma acción a' keyup'. Por cierto: mantenga su JS fuera de su HTML (¿o tal vez los mezcló solo para este ejemplo?) –

click here for a working solution on jsFiddle.

he usado pulsación de tecla para hacer este trabajo.

en el ejemplo, puede avanzar y retroceder por los campos de texto 1, 3 y 5, luego cambiar el valor del campo de texto 1 que muestra el campo de texto 2; luego puede tabular en el campo de texto 2, 3 y 5, y así sucesivamente.

espero haber entendido su desafío correctamente y que esto es útil. aclamaciones.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("input").live("keypress", function() { 
      $(this).next().show() 
     }) 
     }) 
    </script> 

    <style type="text/css"> 
     .hidden { 
     display:none; 
     } 
    </style> 
</head> 
<body> 
<form> 
    <input id="input1" value="1"> 
    <input id="input2" value="2" class="hidden"> 
    <input id="input3" value="3"> 
    <input id="input4" value="4" class="hidden"> 
    <input id="input5" value="5"> 
    <input id="input6" value="6" class="hidden"> 
</form> 
</body> 
</html>

Fuente

2012-10-12 12:19:04

TabIndex en formato dinámico (los elementos aparecen según el caso) problema

Respuesta

Cuestiones relacionadas