Search code examples
javascriptjqueryiphonemobile-safari

Problem with .focus() in web for iPhone

I´m having a problem with the jQuery .focus() function on a web page for iPhone. I have four inputs, when one input reach the maximun of 4 characters the focus have to move to the next input. This is the code.

<input type="password" name="cc_number_1" id="cc_number_1" onkeyup="checkCC1()" maxlength="4">
<input type="password" name="cc_number_2" id="cc_number_2" maxlength="4">


function checkCC1()
{
   if($('#cc_number_1').val().length == 4)
   {
      $('#cc_number_2').focus();
   }
}

The problem is that $('#cc_number_2').focus() is not working, the focus doesn´t move to the next input.

What i´m doing wrong??

Thanks!!

Solution

  • ** Original answer removed as it did not solve the problem **

    There is supposedly a documented bug on mobile Safari (in fact the webkit engine, so it affects other mobile browsers) that makes the keyboard disappear when the focus changes. This seems to be what I am seeing when I test. I am currently looking to see if there is a workaround.