jQuery Mobile焦点键盘上的下一个输入

Question

我有一个jQuery的移动网站与一个由4个引脚输入框组成的html表单。我希望用户能够在每个输入字段中输入一个别针，而不必按iphone键盘上的“下一步”按钮。我尝试了以下方法，尽管它似乎将焦点设置为第二个输入并插入值，但键盘消失，因此用户仍然必须通过轻击事件激活所需的输入。

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

有，我应该分配给$（ “＃txtPin2”）不同的事件？

我试图实现http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/这也是，但我发现它适用于android而不适用于iphone。

任何帮助，非常感谢它。

Answer 1

活生生的例子：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

我试图在Android和它的作品。我无法在iPhone上查看它。 检查：http://jsfiddle.net/Q3Ap8/276/ [直接链接：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); 
}); 

是Android版其他的解决方案是： 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(); 
});