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

Posted 2023-05-06

【中文标题】Javascript autotab keyup/keydown 在 Cordova Android 浏览器中不起作用

【英文标题】：Javascript autotab keyup/keydown not working in Cordova Android Browser

【发布时间】：2021-11-04 16:04:25

【问题描述】：

我创建了一个 autotab 函数，当用户输入数字时，它会从输入切换到输入。自动选项卡在 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>

【参考方案1】：

这可能就像用.focus() 方法替换您的.select() 方法一样简单。还有比使用 find 更简单的添加事件的方法。您可以只添加一个类并基于该类附加事件。您可以简单地使用 .next() DOM Traversal 方法，而不是使用属性来查找下一个输入。您也可以使用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