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(); 
});