Javascript autotab keyup/keydown not working in Cordova Android Browser-CodePudding

I created an autotab function that switches from input to input when user enter a number. The autotab works great on ios and when using a computer keyboard. It doesnt work in Android with touch events. What is the workaround?

code

$('.digits').find('input').each(function() {
    $(this).attr('maxlength', 1);
    $(this).on('keyup', function(e) {
        var parent = $($(this).parent());

        if(e.keyCode === 8 || e.keyCode === 37) {
            var prev = parent.find('input#'   $(this).data('previous'));

            if(prev.length) {
                $(prev).select();
            }
        } else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
            var next = parent.find('input#'   $(this).data('next'));

            if(next.length) {
                $(next).select();
            } else {
                if(parent.data('autosubmit')) {
                    parent.submit();
                }
            }
         }
    });
});

.verification-code {
    max-width: 100%;
    position: relative;
    /*margin:50px auto;*/
    text-align:center;
}
.control-label{
    display:block;
    margin:40px auto;
    font-weight:900;
}
.verification-code--inputs input[type=text] {
    border: 2px solid #e1e1e1;
    width: 46px;
    height: 46px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    box-sizing:border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verification-code">
    <label class="control-label">Validation Code</label>
    <div class="verification-code--inputs digits text-black">
        <input oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"  class="text-black" id="digit-1" name="digit-1" data-next="digit-2"  type="text" maxlength="1" />
        <input oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"  class="text-black" id="digit-2" name="digit-2" data-next="digit-3"  type="text" maxlength="1" />
        <input oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"  class="text-black" id="digit-3" name="digit-3" data-next="digit-4"  type="text" maxlength="1" />
        <input oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"  class="text-black" id="digit-4" name="digit-4" type="text" maxlength="1" />
        <!--<input id="digit-5" name="digit-5" type="text" maxlength="1" />-->
    </div>
</div>

CodePudding user response：

It could be as simple as replacing your .select() method with the .focus() method. There are also simpler ways to add your events than using find. You could just add a class and attach the events based on that class. Instead of using attributes to find your next input, you could simply use the .next() DOM Traversal method. Also you could probably make your number only check work more simply using regex. There are a lot of ways to reduce your code here:

  $(document).on('keyup', 'input.text-black', function(e){
      var _this = $(this),
          next = _this.next();
      _this.val(e.target.value.replace(/[^0-9]/g, ''))
      if (!!next && _this.val().length)
      {
          next.focus();
      }
  });

I did test this on android, and it appeared to work for me. I've also added a check to verify that the input has a length before moving to the next input.

Demo