jQuery Mobile focus siguiente entrada en keypress

Question

Tengo un sitio móvil jquery con un formulario html que consta de 4 entradas de entrada de cuadros de entrada. Quiero que el usuario pueda ingresar un pin en cada campo de entrada sin tener que presionar el botón "Siguiente" de los teclados de iphone. He intentado lo siguiente y aunque parece establecer el foco en la segunda entrada e insertar el valor, el teclado desaparece, por lo que el usuario aún tiene que activar la entrada requerida con un evento tap.

$('#txtPin1').keypress(function() { 
     $('#txtPin1').bind('change', function(){ 
      $("#txtPin1").val($("#txtPin1").val()); 
     }); 
     $("#txtPin2").focus(); 
     $("#txtPin2").val('pin2'); 
}); 

¿Hay algún otro evento que deba asignarse a $ ("# txtPin2")?

He intentado implementar http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/ esto también, pero encontré que funcionaba para android y no para iphone.

Cualquier ayuda es muy apreciada.

Answer 1

Ejemplo vivo: http://jsfiddle.net/Q3Ap8/22/

JS:

$('.txtPin').keypress(function() { 
    var value = $(this).val(); 

    // Let's say it's a four digit pin number 
    // Value starts at zero 
    if(value.length >= 3) { 
     var inputs = $(this).closest('form').find(':input'); 
     inputs.eq(inputs.index(this)+ 1).focus(); 
    } 
}); 

HTML:

<div data-role="page" data-theme="b" id="jqm-home"> 
    <div data-role="content"> 
     <form id="autoTab"> 
      <label for="name">Text Pin #1:</label> 
      <input type="text" name="txtPin1" id="txtPin1" value="" class="txtPin" placeholder="Please enter Pin #1"/> 

      <br /> 
      <label for="name">Text Pin #2:</label> 
      <input type="text" name="txtPin2" id="txtPin2" value="" class="txtPin" placeholder="Please enter Pin #2"/> 

      <br /> 
      <label for="name">Text Pin #3:</label> 
      <input type="text" name="txtPin3" id="txtPin3" value="" class="txtPin" placeholder="Please enter Pin #3"/> 

      <br /> 
      <label for="name">Text Pin #4:</label> 
      <input type="text" name="txtPin4" id="txtPin4" value="" class="txtPin" placeholder="Please enter Pin #4" maxlength="4"/> 
     </form> 
    </div> 
</div> 

Answer 2

lo probé en Android y funciona. No puedo verificarlo en el iPhone. Compruebe esto: http://jsfiddle.net/Q3Ap8/276/ [enlace directo: http://fiddle.jshell.net/Q3Ap8/276/show/]

$('.txtPin').keydown(function() { 
    that=this; 
    setTimeout(function(){ 
     var value = $(that).val(); 
     if(value.length > 3) { 
     $(that).next().next().next().focus().tap(); 
     } 
    },0); 
}); 

Otra solución que funcione para android es: http://jsfiddle.net/Q3Ap8/277/ [http://jsfiddle.net/Q3Ap8/277/show]

$('.txtPin').keydown(function() { 
    that=this; 
    setTimeout(function(){ 
     var value = $(that).val(); 
     if(value.length > 3) { 
     $(that).next().next().next().click(); 
     } 
    },0); 
}); 
$('.txtPin').click(function() { 
    $(this).focus().tap(); 
});