Selecting textbox on focus using jQuery not working in mobile browsers
===

I have four text box on a page which maxlength is 4. I wanted when user fill the first text box the focus automatically move to another text box. The method i write is working fine in all the web browsers but its not working in mobile browsers. 

Used markup 

    <input tabindex="3" type="text" id="cnumber1" class="inputBx ccNumber" style="width:57px;margin-left: 11px!important" maxlength="4" size="4" autocomplete="off" />
            <input tabindex="4" type="text" id="cnumber2" class="ccNumber" style="width:57px;"  maxlength="4" size="4" autocomplete="off"/>
            <input tabindex="5" type="text" id="cnumber3" class="ccNumber" style="width:56px;"  maxlength="4" size="4" autocomplete="off"/>
            <input tabindex="6" type="text" id="cnumber4" class="ccNumber" style="width:56px;"  maxlength="4" size="4" autocomplete="off"/>

Used Jquery method

    (function($) {
      $.switchFocus = function($this) {
        $this.unbind('keyup');
        $this.each(function() {
          $(this).keyup(function(){
            var $this = $(this),
            inputVal = $this.val(),
            iLen = inputVal.length,
            $nextEle = $this.next();
            if (iLen == $this.attr("size") && $nextEle.length > 0){
              if($nextEle.val().length === 0)
                $nextEle.focus();
            }
          });
        });
      }
    }(jQuery));

Please some help me why this is happening with mobile browsers. 
