jQuery Mobile focus next input on keypress

Question

I have a jquery mobile site with a html form consisting of 4 pin entry input boxes. I want the user to be able to enter a pin in each input field without having to press the iphone keyboards "next" button. I have tried the following and although it appears to set the focus to the second input and insert the value, the keyboard disappears so the user still has to activate the required input with a tap event.

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

Is there a different event that I should be assigning to $("#txtPin2")?

I have tried to implement http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/ this also, but I found that it worked for android and not for iphone.

Any help is greatly appreciate it.

Answer 1

Live Example: 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

I tried it on android and it works. I can not check it on iPhone. Check this: http://jsfiddle.net/Q3Ap8/276/ [direct link: 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);
});

Other solution that works for android is: 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();
});