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.

Convertiplane

Let me clear up the bounty: it seems that iOS devices don't accept the focus() and/or select() methods. The field gets visibly selected/activated, however there seems to be a missing 'click' or 'tap' event to activate the devices keyboard. – Weaponeer

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> 

Uwton

Thanks for the help. I tried out your code and although the focus is being set to the next input, the iphones keyboard gets hidden so it still requires the user to tap the focused input box. The event needs to fire on keyup so that the values gets written to the first input before moving to the next. Is there a way to trigger a keypress on the next input? – Convertiplane

I'm having the same issue as described above! – Weaponeer

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

Signature

I'm going to test this :) at the moment my iPhone crashes. I guess I installed a bad tweak from Cydia, haha. – Weaponeer

Doesn't seem to be working on iPhone. Tried a couple of things – Weaponeer

I'm not receiving a feedback on the tap event. I tried tap(function() { alert('tapped'); }); but that didn't do anything. I'll try your solution in a minute. – Weaponeer

I think that focus w/o tap should work too. At the moment I can not do more tests. AFAIR there is a limit in iPhone, that keyboard can be show only after user interaction event - so it should work when you call .focus() in .click handler. I'm not sure whether it works for artificial .click trigger. – Signature

Unfortunately it does not.. thanks for your time so far. I'll try to see if I can get things working. – Weaponeer