Javascript-在iOS中自动聚焦下一个输入，无需关闭虚拟键盘

我正在构建一个javascript单页应用程序，需要用户输入他们的出生日期，以验证他们是否超过18岁才能查看内容

对于用户输入，我决定为每个数字标记4个输入，因为我需要使用CSS来设置样式以使其看起来漂亮。在桌面和几乎所有其他移动设备上，我的代码都能正常工作

用户在第一个输入字段中输入例如“1”，然后在下一个输入字段中输入“9”，而jQuery的一行是“自动聚焦”下一个输入

但是，在iOS上，一旦用户在输入字段中输入数字，虚拟键盘将关闭，然后用户需要点击下一个输入字段（再次打开虚拟键盘）并继续。这非常令人沮丧，不是理想的用户体验。我不得不在iOS上禁用“自动对焦”功能，因为我无法让它正常工作

HTML:

<div id="modal">
 <div id="dob-input">
  <div class="number-field">
  <div class="number-value"></div>
  <input type="number" class="number" pattern=[0-9]* />
 </div>
 <div class="number-field">
   <div class="number-value"></div>
   <input type="number" class="number" pattern=[0-9]* />
 </div>
 <div class="number-field">
   <div class="number-value"></div>
   <input type="number" class="number" pattern=[0-9]* />
 </div>
 <div class="number-field">
  <div class="number-value"></div>
  <input type="number" class="number" pattern=[0-9]* />
 </div>
 </div>
</div>

完整代码笔可用：

我的问题是：是否可以在不关闭虚拟键盘的情况下，在键盘启动或iOS更改时发送单击或聚焦事件

我经常遇到这种情况：但当我把它用于我的需要时，它就不起作用了。我需要的焦点发生在字段中有一个数字，而不是点击按钮

我已尝试按照以下方式发送单击事件： 以及创建一个触摸事件并发送该事件，但所有操作都失败并给出相同的结果（键盘在focusout/blur时关闭）

我在其他应用程序/网站上看到过这个问题得到解决，只是不知道它是如何解决的！事实证明，这是一项非常令人沮丧的任务

---

注意：iPhone iOS上的Safari似乎没有键盘关闭的问题，但iPhone上的Chrome以及Safari和iPad上的Chrome都不起作用。在iOS 8和iOS 9中测试

您是否尝试过

选项卡索引

？还可以尝试在

表单中包装输入

是-我已经尝试使用数字值将tabindex=“0”添加到输入和div中，并将其包装到表单中，但这也会产生相同的结果（用户输入后键盘仍然关闭）

var AgeGate = (function() {
     var numberFields = $("#age-gate input.number");
    var init = function() {
     bindDOBKeypress();
    };
    var bindDOBKeypress = function() {
     numberFields.keyup(function(e) {
      if ($(this).val().length == 1) {
        // Adds the value to number-value div
        $(this).siblings(".number-value").text($(this).val());
        // Auto focuses to next input
        $('input.number:eq(' + ($('input.number').index(this) + 1) + ')').focus();
      }
    });
    // Restrict input to 1 digit
    numberFields.keydown(function(e){
     var inputValue = $(this).val();
      if (inputValue.length >= 1) {           
     $(this).val(inputValue.slice(1));
      }
    });
  }
  return {
    init: init
  }
})();
AgeGate.init();