SAPUI6 Mobile Focus does not work as I expected

Hi All,

     I am new to SAPUI5, I try to implement a "set Passcode screen" on my SAPUI5 mobile application, just like "Enter Passcode" screen on iPhone.

     In this application, I need to move cursor from one text area to another text area when user enters the passcode digit, like this:

However, when user actually enters the digit on the first text area, the foucs() function does not show cursor on the second text area. Only the text box is selected, and the keyboard does not appear as well:

Here below is my code snippet that uses focus()

onAfterRendering: function() {            $("Input").keyup(function(e) {                if($(this).val().length >= 1)                 {                     if($(this).attr("id") == "__xmlview0--a-inner")                     {                         $("#__xmlview0--b-inner").focus();                         }else if($(this).attr("id") == "__xmlview0--b-inner")                    {                        $("#__xmlview0--c-inner").focus();                     }else if($(this).attr("id") == "__xmlview0--c-inner")                     {                         $("#__xmlview0--d-inner").focus();                     }else if($(this).attr("id") == "__xmlview0--d-inner")                     {                         //do something                     }                 }                });        }

I have debugged it for really a long long time, any help would be appreciated.

PS: it works fine on Web Browser.