10

我有一个带有 4 个 pin 输入框的 html 表单的 jquery 移动站点。我希望用户能够在每个输入字段中输入一个 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。

任何帮助都非常感谢。

4

2 回答 2

4

现场示例：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>
于 2011-05-05T00:49:10.613 回答
3

我在安卓上试了一下，效果很好。我无法在 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();
});
于 2013-03-29T10:15:54.433 回答