Question

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

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

用户输入例如＆＃34; 1＆＃34;在第一个输入字段中，然后＆＃34; 9＆＃34;在下一个等等，一行jQuery是自动聚焦＆＃39;下一个输入。

然而，在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>

的JavaScript

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

完整的可用代码：http://codepen.io/dan_hernandez/pen/LGrmGe

我的问题是这样的：是否可以在不关闭虚拟键盘的情况下在keyup上发送点击或焦点事件或更改iOS？

我在SO Programmatically focus on next input field in mobile safari上遇到过这个问题，但是当我根据自己的需要重新定位它时，它并不起作用。一旦字段中有数字而不是单击按钮，我需要关注。

我已尝试按此执行点击事件：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events 以及创建触摸事件和调度，但都失败并给出相同的结果（键盘关闭焦点/模糊）

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

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

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

0 个答案: