Javascript 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, '$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>

​

Answer 1

它可以很简单，就像用.select()方法替换您的.focus()方法一样。还有一些比使用find更简单的添加事件的方法。您只需添加一个类并根据该类附加事件。不必使用属性来查找下一个输入，只需使用.next() DOM遍历方法即可。此外，您还可以使您的号码只检查工作更简单地使用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上测试过这个，它似乎对我有用。我还添加了一个检查，以验证输入在进入下一个输入之前是否有一个长度。

演示