Javascript autotab keyup/keydown 在 Cordova 中不工作 Android 浏览器

Question

我创建了一个自动选项卡功能，当用户输入数字时，它会从输入切换到输入。自动选项卡在 ios 和使用计算机键盘时效果很好。它在 Android 中不适用于触摸事件。解决方法是什么？

代码

$('.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, '');"  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, '');"  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, '');"  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, '');"  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>

Answer 1

这可能就像更换您的 .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 一样简单。这里有很多方法可以减少代码：

  $(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();
      }
  });

我确实在 android 上对此进行了测试，它似乎对我有用。在移动到下一个输入之前，我还添加了一个检查来验证输入是否有长度。

Demo

Javascript autotab keyup/keydown 在 Cordova 中不工作 Android 浏览器

Javascript autotab keyup/keydown not working in Cordova Android Browser

jquery

android

cordova