javascript - Programmatically focus on next input field in mobile safari

Question

I have several input fields in line that acts like a crossword answer line:

Each square has it’s own input field. The reason for this is amongst other things that sometimes a square can be pre-populated. Now, on desktop browser the cursor jumps to the next input field whenever a char is entered. That works really well using something like:

$(this).next('input').focus();

But the problem on mobile safari (we test on ios) is that I don’t know how to automatically "jump" to the next input field programatically. The user can do it via the the "next" button, but is there a way to do this automatically?

I know that the focus() trigger has some limitations on ios, but I’ve also seen some workaround using synthesized clicks etc.

Answer 1

I found a workaround that might work for you.

Apparently IOS/Safari only "accepts" the focus when inside a touch event handler. I triggered a touch event and inserted the .focus() inside it. I tried this on my iPhone3S and iPhone5S with Safari and it works:

var focused = $('input:first'); //this is just to have a starting point

$('button').on('click', function () { // trigger touch on element to set focus
    focused.next('input').trigger('touchstart'); // trigger touchstart
});

$('input').on('touchstart', function () {
    $(this).focus();   // inside this function the focus works
    focused = $(this); // to point to currently focused
});

Demo here
(press next button in demo)