jQuery Mobile键盘按下后将焦点移至下一个输入框

Question

我有一个使用jQuery Mobile的网站，其中包含一个由4个PIN码输入框组成的HTML表单。我希望用户能够在每个输入框中输入PIN码而无需点击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。

非常感谢任何帮助。

- user738175

---

让我来解决赏金问题：似乎iOS设备不接受focus()和/或select()方法。该字段会被可见地选中/激活，但是似乎缺少一个“点击”或“轻触”事件来激活设备的键盘。 - Joshua - Pendo

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> 

- Phill Pafford

---

谢谢您的帮助。我尝试了您的代码，虽然焦点被设置到下一个输入框，但是iPhone键盘会隐藏，因此仍需要用户点击聚焦的输入框。事件需要在keyup时触发，以便在移动到下一个输入框之前将值写入第一个输入框。有没有办法触发下一个输入框的按键事件？ - user738175

我遇到了与上述描述相同的问题！ - Joshua - Pendo

Answer 2

我在安卓设备上尝试过，它可以正常运行。但是我无法在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();
});

- Saram

---

我要测试一下 :) 目前我的 iPhone 崩溃了。我猜我从 Cydia 安装了一个不好的插件，哈哈。 - Joshua - Pendo

似乎在iPhone上无法正常工作。尝试了几个方法。 - Joshua - Pendo

我没有收到关于点击事件的反馈。我尝试了tap(function() { alert('tapped'); }); 但是没什么效果。我一会儿会试试你的解决方案。 - Joshua - Pendo

我认为没有点击的焦点也应该可以工作。目前我无法进行更多的测试。 据我所知，iPhone有一个限制，即只能在用户交互事件后显示键盘 - 因此当您在.click处理程序中调用.focus()时，它应该可以工作。我不确定它是否适用于人工触发的.click。 - Saram

很遗憾，它并没有成功。非常感谢您迄今为止的时间。我会尝试看看能否让事情正常运行。 - Joshua - Pendo